Introduction to Less CSS abstraction on Windows

Following my last post about CSS abstraction with PHP, Chris Eppstein proposed I have a look at Less CSS. Truth be told I had already looked into it. But the big ruby icon turned me down, I do not use Ruby on rail. Turns out you do not need to install Ruby on your server. In fact Less can be use on your computer with no problem.

The Less basic principle is simple, you have a .less file that compiles every time you save in a .css file. Which means that any project can use Less as the output is always CSS.

Installation

Less installation on Windows is easy. You get the one click installer for Ruby here. After the quick install you open a command prompt and tap : gem install Less.

You are now ready to play with Less.

Less is nice

So let’s say that you have a project in production right now, you change your .css for .less and in the command prompt you do: lessc C:\workcedric\xampp\xampp\htdocs\sdmm\css\global.less –watch.

Now every time you change something in your file, Less will compile it in a nice, somewhat optimized .css file . It include imported css file and trims comments but give a readable css file.

Less offers a wide range of ways to extend normal css. Variables, Mixins, Operations to name a few, have a look here to see all the power of Less.

A simple example:

What is not so nice?

For one thing you have no control over the outputted file. Which means that Firebug will never tell the good line where there is a potential CSS bug. I would have liked an option where it only adds Less specific attributes without optimizing the whole file.

Another irritating problem, the watch option did not compile fast enough for me. You know how it goes with front-enders, we sometimes make one line change and test it immediately in the browser. But watch have a 2 seconds delay, which sometimes slowed me down a bit.

Less can really be useful

Less is probably what CSS should be right now, give it a try, I am pretty sure you will integrate it seamlessly to your environment and will not be able to go back to rusty css anymore.