The difference between LESS and Sass is fairly subtle. Mostly just syntax differences, unless you’re planning on extending it and customizing it further. Other than that, not a whole lot really changes your day-to-day front-end work. For the remainder of this blog post I’m going to focus on Sass, since I’ve used it more.
For those of you who aren’t yet aware of what a preprocessor language can do, I’ll attempt to boil it down to a couple of key features.
In vanilla CSS, there’s no way to utilize variables. This means if you need to change a brand color, you’d have to string replace every instance of that color in your stylesheets. However, when using variables, that brand color can be stored once and then referenced throughout the script. You can even use functions on the color to darken it, lighten it, mix it with another color, etc.
This makes customizing frameworks such as Bootstrap or Foundation very easy. Adjusting column widths, gutters, colors, button styles, or anything else for that matter, is a matter of adjusting a couple of variables in a settings file. That would have been hours of work prior to these languages.
Any good developer should be able to spot repetition in code. Repetition is an obvious sign that something can be further optimized. This is where mixins come into play — they allow developers to squeeze down ten lines of code into just one.
Before CSS3 was fully supported by modern browsers, each browser used their own sort of prefixes for these new attributes. We probably shouldn’t have been using them yet in production anyway, but you know, bleeding edge is why we get paid, isn’t it? To transition an element it used to look something like this.
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
With a mixin* we can compress all that code into one line.
@include transition(all 4s ease);
And it will pump out all 5 lines of code for us. Maintainability is enhanced tenfold, and it means developers don’t need to necessarily keep up with all the different browsers’ quirks (although it’s probably a good idea to know how they work.)
* It should be noted that the mixin I’m using here is actually a Compass mixin, which acts as a library of CSS3 mixins, among some other supporting features.
Sass also allows for nesting, allowing us to logically nest our selectors and attributes inside of one another. If you know the .logo class you’re trying to style needs to be styled specifically for the header tag, just place it inside, and Sass does the hard work for you.
This can be a great advantage of using Sass, but it also has a tendency to get out of hand. When you’re 5 levels in, and 40 lines of code down the page, it’s difficult to quickly see which parent you’re actually editing inside of. So be smart when using this.
The Command Line
You will have to use the command line to compile your Sass to CSS files (command prompt for windows, terminal for OSX). Don’t let it intimidate you. Compass makes it very easy to get started.
So get started.