I started investigating CSS frameworks almost a year ago. Back then, the two main contenders were SASS and LESS. Well, there’s really three contenders if you count SASS and SCSS separately, but between those two, SCSS “won”, and in the future, when I say SASS, I mean SCSS. Based on hearsay on the Internet, people seemed to lean towards SCSS. Fast-forward a year, and it looks like little has changed. Well, one thing did change: Bootstrap came out, and in a big way. Bootstrap uses LESS, and I liked the markup and CSS for Bootstrap (the JavaScript not so much, but more on that later). So I thought I would get some first-hand experience with LESS. At this point, I’ve only played around with LESS for a few days, but so far I am not liking what I find. Even if you’re not using Compass, SCSS seems like the superior solution. LESS does have its places though. If I ever start working on my browser based IRC client, I plan on switching to LESS because I need to generate CSS on the client’s side. Now for a brief satellite-level overview of both of these CSS frameworks:
SASS (SCSS)
Pros:
- Compass
- Better command-line interface
- Command-line watch mode
Cons:
- None?
LESS
Pros:
- In-browser mode
- Mixes units better (px + em)
Cons:
- In-browser mode
- No frameworks close to the level of Compass
Syntax Examples
Well I don’t really have an opinion about $ vs @. Not sure if I like how @ mirrors @import and @media rules, or if I dislike how they’re sharing the same sigil as real CSS rules.
Variables
SCSS: $blue: #3bbfce;
LESS: @blue: #3bbfce;
Mixins
SCSS: @mixin left($dist) { float: left; margin-left: $dist; }
LESS: .left (@dist) { float: left; margin-left: @dist; }
Command Line
There’s a Ruby gem for LESS that I haven’t tried that might be better, but the SASS gem is far superior to the npm LESS module.
SASS
$ # if you don't specify anything, reads from stdin $ sass $ sass --help | head -4 Usage: sass [options] [INPUT] [OUTPUT] Description: Â Converts SCSS or Sass files to CSS. $ sass --version Sass 3.1.15 (Brainy Betty)
LESS
$ lessc lessc: no input files $ lessc --help usage: lessc source [destination] $ lessc --version lessc 1.3.0 (LESS Compiler) [JavaScript]
Suckage
Google results for suckage, lower is better.
SASS: About 2,890,000 results (0.26 seconds)
LESS: About 1,440,000 results(0.11 seconds)
About Compass
So I’ve mentioned something called Compass a few times now. If you don’t know what it is, it is basically SASS on steroids. The killer feature for me is easy sprite generation. With compass, you’ll never need to write a vendor prefix. Just reading the source code for their mixins is a great way to familiarize yourself with browser hacks. For example, I used to just throw display: inline-block on elements, but I didn’t know about the differences between the browsers until I read the source for the Compass mixin for inline-block. If you use SASS but don’t want to deal with Compass, you can just copy their mixin. Some warnings about Compass: upgrading is dangerous. Sometimes they’ll change a mixin that will the way you’re using it. And sometimes their mixins won’t be the most convenient for IE compatibility. For example, to support linear gradients in old IEs, you have to add additional lines, and these lines aren’t documented.