An Introduction to SASS - by Nick Strife

SASS - Syntactically Awesome Style Sheets - is a preprocessor for CSS. Using SASS can help towards keeping styles consistent and maintainable throughout a large project. This is an introduction to some of the features of SASS that can be combined to give your CSS superpowers.

Variables

Declare common attributes you’ll be using all over your stylesheets (eg colours, fonts, margins, breakpoint sizes, etc) in one place and they can be used anywhere.

$main-font: ‘Open Sans’, sans-serif; $alt-font: ‘Lato’, sans-serif;

$main-color: #774936; $alt-color: #6A9377;

Functions

Functions can do some very clever things and their advanced usage is outside of the scope of this introduction. If statements, loops, string and number functions - the usuals you’d find in any programming language become available in your style sheets.

SASS also has built in colour functions that can be chained together to go from one colour to another, meaning colour schemes could in theory be updated for a whole site by changing a few variables and having SASS take care of the rest.

Here’s an example of a map and a function to organise and generate colours:

Map:

Nesting and the SASS ampersand

Ampersands in SASS can be used to reference parent selectors. Some examples below:

Nesting can give your stylesheets a visual hierarchy that can match the structure of your markup. This can help give your style declarations scope, allowing you to tweak the appearance of elements depending on their context. Use sparingly, over-nesting leads to convoluted selectors and makes maintenance a nightmare.

Consider the following markup for a blog post and a “pinned” blog post.

The title and content styles here will only apply to elements with a class of title/content inside an element with a class of blog post

Mixins and Placeholders

Mixins and placeholders can both be used to group together commonly used attributes which can be used inside classes when you need them. Generally speaking if your styles require a variable - use a mixin, if not - use a placeholder.

This is just a small sample of the power of SASS. For more information check out www.sass-lang.com and www.thesassway.com