CSS pre-processors are an attempt to overcome the inefficiencies of CSS as it currently stands. Pre-processors adopt a Don’t Repeat Yourself (DRY) methodology which is core to most programming languages so applying programming concepts like variables to CSS makes sense. This is great if, for example, we’re using the same colour value in a few places in our stylesheet and for whatever reason this changes (say a subtle rebrand). Rather than using Find and Replace and hunting down instances of the value which may have unintentional consequences it may be better to explicitly define a variable name and value – say brand-colour – and if the colour value does change we just change it one place and everywhere it’s invoked gets updated.
The two pre-processors you’ve no doubt already encountered are LESS and Sass and it’s the second one I look at here. Sass has two flavours of syntax – Sass and SCSS. The former eschews the curly brackets and semi colons of traditional CSS while the latter is much closer to the syntax we’ve come to know and love so it’s probably better to go with that.
The first thing is to get Sass up and running which is often the point where command line shy (CLI Shy?) part ways with the concept but there’s no that much to it.
Of course there are easier ways to do this – using a GUI like Koala or Scout which don’t require you to install Ruby but if you’d like to roll up your sleeves then a few commands will get you and running quick.
If you’re on a Mac you’re in luck as OS X comes with Ruby pre-installed. You’ll need Ruby in order to install Sass. If you’re on a PC you can use the Ruby Installer and consider using Windows Powershell for your commands.
In OS X Terminal type:
gem install sass
and watch the magic unfold:
or not. If you get a permissions error you’ll need a sudo in front:
sudo gem install sass
Preceding a command with sudo, if you don’t know, grants administrative privileges so will let you run your command as a full power user. It’s powerful and should only be used when you know exactly what the command is going to do (rather than just copying and pasting stuff from the web). You will then be prompted for your user password.
The gem part of that command is just the Ruby package manager that takes care of installing all of the necessary files for Sass to work.
That’s it. Sass is now installed.
Now take this from an untypically basic CSS in a file called style.css:
Both the body and the heading share the same colour. Wouldn’t it be great to just declare the colour value once?
Close the file and change the file extension of the stylesheet to .scss:
Opening up the stylesheet again we can add a variable and give it the hex value. We just replace the hex values in body and h1 with the name of the variable (you can call this anything but you’ll just need to precede it with a dollar sign):
By default our browser can’t parse SCSS files so if we link this to our HTML it’s not going to do much of anything. What we want to do is output CSS. We do this by pointing Sass at the SCSS file.
My SCSS file resides in a styles subfolder in my Documents folder.
Back to Terminal:
The cd command changes the current directory to my styles folder. To check where I am I can use the pwd (Present Working Directory) command:
Now that I’m in the folder with my style.scss file let’s get Sass to keep an eye on and convert it to .css. We use the command:
sass --watch style.scss:style.css
This just tells Sass to output a file called style.css based on style.scss. Every time the SCSS file is saved it will update the CSS file.
If we have a look in the styles folder there are now three files:
- style.css – the output CSS file
- style.css.map – a reference file mapping style.scss to style.css
If we open up the CSS file we’ll see honest to goodness CSS:
If we update the SCSS file:
…and save it let’s see what happens back in Terminal:
It has detected that the SCSS file has changed and updated the CSS file adding the new colour values wherever the $brand-color variable was used:
All edits should be made to the SCSS file so you can leave the CSS file alone since that is being auto generated.