I have recently started using Sass, a CSS preprocessor language and I’ve found it extremely useful. This article explains some of the key benefits I have experienced and it will hopefully inspire you to consider using Sass for your next project.
There’s been a long standing need for variables in CSS. They allow us to define standard typography styles and a base colour scheme for sites. So when a client asks me to change the main text colour for a site I now only need to change this in one place rather than several different places in several different stylesheets.
Mixins are reusable chunks of CSS which help you to avoid writing duplicate code. A good example is when I use rems to define a font size but also use pixels as a fallback for older browsers, such as IE8, that don’t support rems.
Sass also allows you to use partials and imports but in a more organised way than standard CSS imports. A partial is a Sass file that is prefixed with an underscore. These files don’t get compiled into CSS files, instead their purpose is for inclusion in a main CSS file which is then compiled and deployed to the production environment. This makes your CSS files easier to manage as you don’t have to search through thousands of lines of code. As long as you name your Sass partials sensibly, anyone can work out the correct partial for the part of the site they need to work on.
Another useful feature is the ability to nest your CSS as demonstrated here.
You wouldn’t write this in HTML:
so why do it in CSS.
On each project, this could save you a minutes or even hours of writing unnecessary CSS. Be careful though; you can nest too deeply and get messy CSS. It can also make it difficult for someone else to look at your code and pick out the bit they need when it is nested 10 levels deep.
Write Fewer Lines of Code
With Sass you can easily make changes to your CSS in one place; change the breakpoints of a responsive site with just a few lines of code, change a colour sitewide or create themes.
It also helps you keep your code DRY (Don’t Repeat Yourself) as you can use a combination of variables and mixins to create reusable CSS code snippets.
Two other popular preprocessors are Less and Stylus.
Whilst Less is used by Bootstrap, there doesn’t seem to be a big community using it; this is important for people new to a language as the online community is often the first point of reference for help and support. Sass on the other hand is used by several major frameworks including Compass, Bourbon and Zurb Foundation.
Stylus uses an open ended syntax which allows you to omit curly braces, colons and semicolons.
I find this much less readable and, from a maintenance point of view, potentiality difficult to pick out the particular class or mixin you’re looking for.
Sass is by far the most powerful, most widely used and easiest to work with. I would argue you could use it for all projects. I find that just breaking up CSS into separate partials (“ _header.scss”, “_menu.scss”, “_content.scss”, “_footer.scss”), makes it much easier to manage your CSS and quickly find the bits you need. And if you name your files sensibly, it’s easier for someone else to find things too.
More info on Sass can be found here: http://sass-lang.com/