LESS in 5 minutes

LESS is a handy precompiler for CSS, but as it develops it becomes so complex we start assuming that we need a tutorial or long read in order to understand it. I think it’s worthwhile to use just a few very basic capabilities of LESS (leaner CSS) and that you can learn how to use them in 5 minutes.

First, on Windows you can use http://winless.org/
If you use WordPress, install Jetpack which comes with an extra CSS option allowing LESS (or use another plugin that has integrated the PHP LESS-compiler).
No sweat so far.

Take an old CSS file and replace color codes with variables like so:

body {
color : 77da34;
}

becomes

@green : 77da34;
body {
color : @green;
}


Variables are the first thing we absolutely NEED if we want to write leaner CSS. The next is mixins:
Instead of

opacity : .75;

you write

.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
.element {
.opacity (.75);
}

Et voilà. This is very handy for browser compatibility and with Media Queries.
Let’s offer some flesh. Here is a file of predefined mixins I found on the net and frequently use: more.less. Feel free to use.