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:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
 
#defaults {
  @width: 960px;
  @color: black;
}
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
 
.article { color: #294366; }
 
.comment {
  width: #defaults[@width];
  color: .article['color']; 
  .bordered;
}

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.

6 thoughts on “Introduction to Less CSS abstraction on Windows

  1. Hi,

    I have a problem with LESS. After i runned the command prompt: gem install less, is not created me the folder “Less” on (windows).
    Where is created me ?
    How can to solve this problem.

    Thank you,

  2. They’ve stopped developing the Ruby version now haven’t they? So i’m stuck having to setup cwywin and node.js ­čśŤ Or using the php version that doesn’t support mixing yet.

  3. Why don’t you used jquery’s trim() before validating any field as required. e.g let’s say first name is required. now if i just start to insert spaces into text box it would never prompt me that there is noting in text box. my suggestion is before every required field message you should trim() that field. At the moment your work is nice so far.
    Have a good day.

  4. As mentioned above they stopped developing the Ruby version.

    Be sure to try out WinLess: http://winless.org. WinLess is a compiler (with GUI) for LESS. WinLess can watch your LESS files, and automatically compile them when they have changed.
    If you are using Visual Studio for your projects you should also check out the BuildEventScript of winless.org.

    I would advise against using any compiler which doesn’t use less.js to do the actual compiling. less.js is written en maintained by the inventor of LESS, ports like the Ruby version or dotlesscss are (as far as I have seen) often buggy and behind on less.js. The tools found on winless.org are based on less.js.

Comments are closed.