Sass v Less v Stylus: The pros and cons


Which CSS preprocessor will offer the best solution for your project?



LESS was inspired by Sass, and arrived a couple of years later in 2009. It’s considered mature and stable, but it still gets regular updates.

LESS includes variables, which enable you to set a value in one place and use it by reference everywhere: mixins, which are variables that drop all the content of a class into another with a single line; rule nesting, which clarifies inheritance; functions, which enable you to process numbers and strings; and plenty of colour management features. It includes basic search and replace and programmer-style text formatting.

LESS has good foreign language support, so it’s worth considering if English CSS isn’t your main interest. It also includes guarded mixins, which produce different CSS according to tests you can specify. It doesn’t have fully general conditionals, which can be a limitation for some applications.

As it is used to define styles in the Bootstrap framework, you’ll have to use LESS if you use Bootstrap. While developing, you can run LESS from the command line within Node.js or Mozilla’s Rhino. You can also include it as a script in your pages and compile on the fly, but that’s a bad idea for a production server unless your site gets a couple of hits a day.

Screen shot 2015-07-14 at 14.55.06

Sass –

Sass (Stylistically Awesome Stylesheets) is a step up from LESS, with less (huh…) simple expansion and replacement, and more ‘Let’s pretend to be a developer’ language features.

Sass needs a language called Ruby, which needs some setting up on Macs, Linux, and Windows, although there’s also a version that works on Node.js, with some differences. Sass is more like three tools in one. You can write it as SCSS, which is an extension of CSS3 and looks like normal CSS with extra features, or you can write it as Sass, which uses indents instead of curly brackets. Both do the same things, but you can choose between familiarity and speed.

The third tool is SassScript, which includes plenty of ready-made helper tools for manipulating numbers, strings, lists and so on. SassScript is quite clever. You can do things like define variables that work across a project or limit variables to the insides of a selector. It can even mix units, so you can calculate widths in a combination of ems and pixels, which is a neat trick.

Compared to LESS, Sass adds extra smarts, at the cost of extra learning time. It has more complicated and powerful conditionals and repeats, better selector management, and support for partials (or snippets of CSS you can pull in from a file).

Screen shot 2015-07-14 at 15.29.16

Stylus –

Stylus isn’t as popular as LESS or Sass, but it may be underrated, and is certainly worth a look. One obvious big difference is cruft-free syntax, with no useless curly brackets or pointless semicolons, all replaced by white space and indentation.

Stylus is really the closest thing to a full programming language for CSS, this side of JavaScript. In addition to all the usual preprocessor features, like variables and operators, you can define your own functions for smart CSS parameter management and expansion. Stylus includes all manner of conditionals, loops, as well as an @import option for reusing CSS libraries.

Transparent mixins are a big win. You can define functions in the usual way, but you don’t need to specify a list of parameters. Stylus can copy any parameter string into the CSS. It even supports introspection, which means code can see where it is and what’s happening around it, so it can behave differently in different blocks.

Another unique feature is interpolation, which is the ability to step through a predefined list of strings of values with a few lines of code, and to drop the strings/values into the final CSS. It’s a good way to write dense, efficient code with the downside that it can be harder to read.

Screen shot 2015-07-14 at 15.59.50