Getting Sassy with SASS - Your First Steps

CSS is great and there would be no web without it: if you have been involved enough to remember the state of the web in the late nineties, you will immediately get the point (probably, along with a couple of shivers). Unfortunately, CSS has its limitations and they are not easy ones; that’s why developers have felt the urge to extend its possibilities (most notably, introducing the concept of variables), with preprocessors.


The idea behind CSS pre-processors

A preprocessor takes a file written in some programming language syntax as its input and generates an output file following the syntax of another programming language. Its purpose is usually to extend the syntax of some language by adding new features: one can write the code with the extended syntax, and the preprocessor translates it into the native syntax of the original language. SASS is a preprocessor that allows users to write CSS code using the the extended SCSS syntax that adds many features: variables, nesting, functions – among the most notable.

How it works

The extension of SASS files is .scss, but browsers won’t be able to interpret them, since they can only parse standard .css files: what the SASS app does is to translate, automatically and on-the-fly, our SCSS file to a standard CSS file browsers are able to handle. This process is called “watching”. For this to work, SASS requires Ruby to be installed first, but if you are on MacOSX, Ruby comes pre-installed. A quick solution can be to use Scout, an AIR app available for Mac and Windows that comes with Ruby and has the SASS compiler built in.

Check the official guide for an overview of the installation options http://sass-lang.com/install

Since MacOSX has Ruby already installed and installing SASS is fast and easy, you don’t need a GUI, and using nothing more than the console is probably the best option: just open the terminal and type sass --watch input.scss:output.css every time you start a working session (input.scss is the name of the SCSS file you are working on and output.css is the name of the CSS file in your website directory; just take care of the paths).

A first taste: variables

One could wonder which is the rightful reward after the installation process; well, there are many but what tickles a developer’s fancy most, is probably the possibility to have variables in CSS. But let’s take a short break for a small but noteworthy caveat: you won’t be able to dynamically set values on the web page. SASS variables live only in the SASS file and will be compiled into static CSS values.

Getting back to our variables, they open a lot of possibilities; just think about how many times we write the same color or padding/margin value in a CSS project. Instead, we can declare a variable, prefixed by $, and assign it a value like so: $testValue: 40px;

Variables accept any CSS value and can be declared anywhere, but one must keep in mind that variables are scoped; to be accessible anywhere, they must be declared outside any CSS declaration, otherwise they will be available only inside it. It’s a good idea to write down all variables in a reserved area at the top of the document, making them global variables but, contrary to Javascript, in SASS it makes sense to use more global variables than locals.

It may seem a bad practice to have almost no local variables and many global ones, but in SASS the benefit of variables becomes palpable when they are used as much as possible, and if you have too many of them, you are probably misunderstanding their purpose. If you are a fan of calc(), you will be happy to know that SASS manages operators natively.

Nesting is great but, please handle with care

Next to variables, SASS has many other killer features, and nesting probably is the one that stands out the most: we can easily nest selectors, creating kind of a CSS object and keep our code dry and very well-structured.

With the aid of the ampersand operator (&), whose function is to replicate the selector that precedes it, we can build up more refined objects. 

Nesting is surely an interesting option and, at the beginning, can look really exciting, leading us to the habit of nesting too much and too deep. There is something that has to be carefully kept in mind: nesting produces overqualified selectors, and the risk of coming up with something like this is real:

 div.content div.container { ... }
 div.content div.container div.articles { ... }
 div.content div.container div.articles > div.post { ... }
 div.content div.container div.articles > div.post div.title { ... }
 div.content div.container div.articles > div.post div.title h1 { ... }
 div.content div.container div.articles > div.post div.title h1 a { ... }
 div.content div.container div.articles > div.post div.content ul { ... }
 div.content div.container div.articles > div.post div.content ul li { ... }
 div.content div.container div.articles > div.post div.author { ... }
 div.content div.container div.articles > div.post div.author a.display { ... }
 div.content div.container div.articles > div.post div.author a.display img { ... }

A good practice is to avoid nesting more than four levels deep.


Functions, mixins, directives and other magic

SASS has many other good cards left to play: we can write our own functions, for example. The SASS scripting language is very similar to JavaScript and levels up the efficiency and flexibility of our code. However, even though we can create our own functions, we often don’t need to because SASS comes with a load of pre-made ones for solving everyday use cases; the most popular are darken($color, $amount) and lighten($color, $amount) that allow us to easily set a lighter or darker version of a color, without defining it explicitly. And there are mixins too; function-like statements that allow us to reuse a portion of our code. In the following example, a mixin for the popular clearfix hack is built and becomes available in whichever container we need it.

Honestly, installing SASS is not as easy as installing a standalone application since it requires Ruby to work (Mac users have no excuses for that point) but the chest of rewards it brings is impressive. Integrating SASS in your projects will change your way of conceiving CSS forever, and it will do this in a very gentle way since it accepts standard CSS syntax, and the most powerful features are easy to understand, even by beginners. Many CMSs integrate a SASS compiler, freeing us from all kinds of nuisances: later on we may even end up thinking that the SASS way has always been the only one, since the beginning.

 

Ready to start? Create your free account now

More great blog posts from Alessandro Loverde