Needless to say, I’m very opinionated about css preprocessors, and whenever I see someone doing front end dev and not using one, it makes me cringe. The time they save you is so absurdly much more than the time it will take you to learn how to use their common-sense rules that I would seriously doubt the skills of anyone who calls themselves a front end dev and doesn’t use one. But with a number of preprocessors out there, I see a lot of confusion over which one is the ‘best’, especially for those just starting to learn. In this article, I’ll go over each of the major preprocessors in gritty detail, trying to be balanced in the pros and cons so that you can choose for yourself.
Less is probably the most popular of them, partly because of it’s use in Twitter Bootstrap and partly because it’s docs are the best. Less is also by far the most simple of the preprocessors. It supports nesting, variables, basic mathematical operations, color functions, @import, and basic type functions. The feature set here, perhaps aside from basic type functions, is considered to be the base feature set for a css preprocessor. All of these features are enormously useful, and nesting, mixins, and variables quickly become essential once you are used to working with them.
Awesome thing you can do with less
This example demonstrates many of the basic great features of css preprocessors, including variables, mixins, functions, and the parent selector.
Sass is also very popular, especially since it’s now the default for stylesheets in Ruby on Rails. Sass has all the features that less has, but also includes a large amount of more advanced functionality. There are two dialects of sass available - sass and scss. With scss, parens and semicolons are required as with vanilla css, where in sass, there are no parens or semicolons allowed and the nesting is dictated with whitespace. For someone who writes a lot of css, a whitespace-dependent syntax begins to make a lot of sense, as we almost always indent our css anyway, and this can be a very significant time saver.
Sass includes control directives, which gives it an immense amount of power over less. If/else statements, foreach loops, array lists, and type detection are fair game to use within sass, allowing one to write very flexible mixins. It also includes @extends which allow you to build on a previously defined css rule, and a protocol for extending sass to add your own custom functions. Sass also allows keyword arguments (kwargs) in their mixins, which allows you to make your code more clear and/or switch around the order of arguments. Finally, sass’s color functions are more varied and robust, allowing you to perform nearly magic with colors and color formats. However, sass’s documentation is much less pretty and clear than less’, and finding the docs for the more advanced sass functionality is a bit more difficult and less accessible.
It’s certainly worth mentioning that sass can be used with a framework called compass, which provides shortcuts for things you often do with sass such as gradients, sprites, and vendor prefixing. There is a large community around both sass and compass which makes it easy to get support if you are just starting out.
Awesome thing you can do with sass
This example takes advantage of sass’s if/else statements and the more terse ternary form to set the text color to light or dark based on the background.
Stylus is way ahead as far as features and power, but is also the least popular. It’s hard to think of a feature that stylus does not have. With stylus, you can write your css however you want and mix and match between bracket/semicolon syntax or indentation (with very few exceptions). It also takes terse syntax to the next level by not even requiring a colon between your css properties and values, and by allowing you to include a mixin just like you’re writing a normal css prop/val pair (using the
Stylus also supports all the features that less and sass support with a bunch more on top. You can get properties from parents and pull them into children and/or mixins - if the property isn’t found, it will bubble up until it finds a match. Stylus also has an introspective api, where a css block can tell if it’s at root level or not and change its output based on this. It also supports rest parameters (taking multiple arguments in as an array), can convert images to base64, automatically vendor prefixes @keyframes, and allows you to pass a css literal block wherever you want.
Awesome thing you can do with stylus
This example uses the killer feature of being able to trace back up through parents to find out if a property has been defined and if so, pull the value.
Each of the preprocessors have their advantages and disadvantages. Less is easier to pick up and more similar to css. Sass is a solid rails standard and a very safe and secure middle road that comes with a delightful boost in power. And stylus has every advanced feature you could dream for, as well as a very flexible syntax.
I’d be more than happy to hear anyone else’s opinions and/or experience here too - join in the discussion on Hacker News!
– also want to give a special thanks to @snugug for his fantastic insight on this topic : )