LESS vs Sass? It’s time to switch to Sass

The CSS pre-processor debate

Before I begin my highly opinionated tirade, let me just mention that I learned Less first. Less is great for beginners, it’s really easy and quick to set it up. It’s very similar to plain CSS, so writing it is intuitive. Compared to CSS, everything about LESS was very easy and friendly, I was quite enjoying Less for a short while, until i discovered the truly awesome power of Sass and Compass. Looking back, i like to imagine Less as the training wheels for beginners; or perhaps a gateway-drug into preprocessed CSS. Sass is the next level, a tool for the slightly more experienced front-end developer.

Why Sass is better than LESS

• Sass lets you write re-usable methods and use logic statements; ie. conditionals and loops. LESS can do these things but in an inefficient and counter-intuitive way (ie. guarded mixins for conditionals, self-referencing recursion for loops). Like Less, Sass comes with lots of very handy functions built-in including colour manipulation, mathematics, and parameter lists.
• Sass users can utilise the awesome power of the Compass library. There are libraries available to Less users, but nothing really comes close to Compass, which is regularly maintained and contributed to by a huge community. Compass has some really awesome features like dynamic sprite-map generation, legacy browser hacks, and cross-browser support for CSS3 features.
• Compass also lets you add an external framework like Blueprint, Foundation, orBootstrap on top. This means you can easily harness all the power of your favourite framework without having to deal with the mess of using multiple tools.

Problems with Less

Less aims to be as much like CSS in style, syntax and structure, and while this is a nice thought for easing users into writing it, there are a few issues which make it a lot less fun to work with than Sass:

Logic statements

In Less you can write a basic logic statement using a ‘guarded mixin’:

The equivalent in Sass using if statements:

Loops

In Less you can loop through numeric values using recursive functions:

In Sass you can iterate through any kind of data, which is much more helpful:

Custom functions

In Sass, you can write your own handy functions like so:

In Less:

Problems getting started with Sass and Compass

It seems like the biggest problems that folks have with moving to Sass are:

• The added hassle of setting up the Ruby environment
• Crippling fear of the command line
• The inconvenience and time involved switching to a different tool

With the enormous popularity of Twitter’s Bootstrap, many designers and developers are moving toward this framework to fulfil their presentational needs. I’ve seen quite a few developers grumpy about the fact that it is built with Less.