The popular item today for designers are CSS pre-processors (a 'light-syntax' version of CSS allowing for functions, variables, nesting and other nifty features). The two big names are LESS and SASS, although there are quite a few others out there too.
At my latest company, I've learned (and wielded quite mightily) SASS. However when looking at new projects in NodeJs, a question of wether or not I should switch to LESS has come up. I have collected four key differences that I feel make the answer quite plain:
- Compass is usually bundled with SASS
Compass it is a library containing a plethora of mixins and enhancements ready-to-use for SASS, including automatic sprite generation based on your CSS, more color and browser rules, and common utilities (such as micro clearfix, etc) that I just don’t remember right now - LESS can't do "extending"
This is a BIG deal when your output CSS starts creating a noticeable footprint. Every time you use a mixin, you’re re-generating the css for that mixin. However, every time you ‘extend’ a selector, you are in fact just adding more selectors to the original rule, which can be a GREAT way to reduce the output CSS without making your code more confusing. - LESS requires users to install NodeJs
Although it’s all the rage right now, not every designer has bothered going through this process, and it can be confusing / daunting to the un-initiated. SASS only depends on ruby, which comes pre-installed on mac (and I’m assuming most *nix machines). - SASS handles multiple files gracefully
By using an _ (underscore) prefix on your files, they will not be compiled into their own files, and are assumed to be partials. All other SASS files encountered during the watch or compile will be generated into equivalent css files, along with identical folder structure. This is great if you actually NEED multiple css files (at least while developing). - LESS can't do dynamic properties
This means something like:
.prefix ($property, $value) { {$property}: $value; -moz-{$property}: $value; -webkit-{$property}: $value; }which is ridiculous. - LESS can't do for-loops
This shouldn't need much explanation. LESS's attempt to be declarative reduces the capabilities of its mixins.
Conclusion:
If you have the option, and the rest of your team won't hate you for it (but since when did you start caring what they think?) then go with SASS. Those seemingly trivial benefits can end up playing a fairly big part down the road. It's now become a conscious design point if we choose to use a mixin over extending, and the utilities provided by Compass natively are invaluable.
Update:
After some discussion, I did a bit more thorough review of Stylus, which I was aware of but chose to ignore for this post. It appears to have a more powerful variant of 'extending' than SASS, so if you're hell-bent on using a NodeJs-based solution, I would recommend taking a look at that. Unfortunately you'll have to roll your own Compass equivalent (which means no spriting automagic and other utility functions) but hey, that's your decision. And if you like Compass then you should checkout Nib for Stylus (thanks Moyashi).
Comments
moyashi: Stylus has nib