LESS CSS Preprocessor


This entry was published on October 29, 2011 and may be out of date.

I have been a sceptic since the very first time I saw these CSS pre-processors emerge. If I remember correctly, it was SASS (a sister project of HAML) that emerged as a way to introduce variables and other neat features to CSS.

My scepticism began after I gave SASS/HAML a try. Even though the documentation looked very inviting, getting started was too much trouble. Not to mention the code was buggy.

It would be unfair to bash the developers of SASS/HAML, these technologies were experimental and not at all mature at that stage. Implementation in a large critical business application was not feasible by any means.

Years went by as they evolved and matured. SASS along with LESS and a few other newcomers became competitors in this particular niche. Many developers adopted them quickly and eventually the interwebs became swamped with debated about which one is better1.

Recently, due to overwhelming noise2 in the interwebs3, I decided to give them another try.

My objectives for using a CSS pre-processor were:

  1. I like modular CSS files. I want them all concatenated and minified before passing onto the browser.
  2. I do not want to handle the command-line interface. Running a command after every little CSS change seems counterproductive to me.
  3. I want convenience and speed. Anything that slows me down would force me to go back to vanilla CSS.
  4. I do not want to learn a new language.
  5. Must fit into my workflow. I use Coda and develop most websites and applications with WordPress and CakePHP, respectively.

LESS appeared to be the easier choice, primarily because of the following reasons:

  1. Less.js provides the option to pre-process CSS files on the fly
  2. Less.app is a native Mac OS app that is free to use4
  3. Language-agnostic5
  4. Drag-drop setup. Just had to rename the file extension from .css to .less

I chose not to use Less.js with the project as it adds a little payload to the already heavy templates. Instead, I use Less.app for snooping my development folder and compile, concatenate and minify the output.

I have just started off with LESS and eager to find out more and more as I go on with my current project. I must say that the increase in productivity is noticeable as LESS is such a time-saver.

I never thought I would say this, but I am starting to get hooked on LESS.

  1. The debate is brilliantly visualised at Wrangl, http://wrangl.com/sass-v-less []
  2. Lea Verou has an excellent case in the argument against CSS pre-processors. Aaron Russell defends CSS pre-processors and counters one criticism at a time. Both are must-reads. []
  3. Also, Twitter’s Bootstrap framework and Compass looks very promising []
  4. In comparison, Compass.app, is written in Java and costs money to run. It’s only $7 but I’m cheap. []
  5. A complete contrast to SASS and Compass. Their official documentation relies on the existence of Ruby. []