Like many web designers, I like the ease and the simplicity of CSS and have been very much of the thought; “if it ain’t broke, don’t go making it complicated”.

That is until recently where I’ve found myself repeatedly writing 5 lots of vendor prefixes for something like CSS3′s rounded corners… so I decided to experiment with LESS - a ‘dynamic stylesheet language’ that extends the capabilities of regular CSS to allow for sorely missed features such as variables, mixins, nested rules as well as functions and operations.

There are a couple of options on how to allow LESS to extend your CSS, but the best option I’ve found so far is using the Crunch app, which runs as stand-alone software on your computer (no server-side messing) and outputs your LESS into regular CSS as well as minimising it (to a degree) stripping out all your comments and superfluous line-breaks.

The most beneficial feature of LESS and one of the many reasons why I would be reluctant to go back to writing regular CSS, is that it allows for the fiddliest parts of CSS3 features to be wielded quickly and easily, potentially boosting your website’s awesomeness no end.

For example, for something as simple as a CSS transition, in standard CSS you would have to write out something like this:

Regular CSS3 transition:

div:hover {
transition: all 2s ease-in-out; /* Standard */
-moz-transition: all 2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 2s ease-in-out; /* Safari and Chrome */
-o-transition: all 2s ease-in-out; /* Opera */
-ms-transition: all 2s ease-in-out; /* IE */
}

CSS3 Transition with LESS:

From LESS mixin file:
.transition(@type: all, @duration: 0.3s, @ease: ease-in-out) {
transition: @type @duration @ease; /* Standard */
-moz-transition: @type @duration @ease; /* Firefox 4 */
-webkit-transition: @type @duration @ease; /* Safari and Chrome */
-o-transition: @type @duration @ease; /* Opera */
-ms-transition: @type @duration @ease; /* IE */
}

Now my transition becomes:
div:hover {
.transition(all, 0.5s, ease-out);
}

Which outputs into CSS as:
div:hover {
transition: all 0.5s ease-out; /* Standard */
-moz-transition: all 0.5s ease-out; /* Firefox 4 */
-webkit-transition: all 0.5s ease-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-out; /* Opera */
-ms-transition: all 0.5s ease-out; /* IE */
}

The beauty is you can quickly and easily call all vendor prefixes for the specific CSS3 transition as well as feeding it different parameters by simply writing a short line of code instead of maybe 8.

This is just the tip of the iceberg with regards to have much time and power LESS lends to CSS – I strongly urge everyone to have a play.

Sources:

• http://lesscss.org/
• http://crunchapp.net/