UPDATE 7/18/14 – I gave a small presentation about this at the Topanga WordPress meetup, here is the slide deck.

LESS is a great CSS pre-processor, and one of the two main CSS pre-processors along with SASS. I personally use SASS at work and on some projects, but primarily use LESS on personal projects, like this very website!

The beauty of LESS

There are many great reasons to use LESS CSS, the main that sold me, is nesting.
Here is an example of typical CSS

Here is that code in LESS, which will process INTO that CSS

And this is just where it starts to make your life easier.. can you say variables?

Or even MORE amazingly… variable based functions

Enqueue the less

Unlike other css files that use wp_enqueue_style(..) it is not that easy with LESS, but it is possible!

and now we can use the normal enqueue method!

Client Side JS LESS Compiler

While in development, to make your life as a developer easier, you should use the less.js file which will compile the LESS to CSS. This we can do normally with wp_enqueue_script(..)

Compile Locally and Enqueue for Production

You should never ONLY use LESS for a production environment (I use both). I have the mac program for less which watches over less files and compiles a CSS version of the same name in the same directory. If you are feeling adventurous tech wise, you can also use grunt, or gulp. If you are using sublime text there are even add-ons for building out the CSS automatically on save.

Once you are ready to move to a production state, enqueue the .css file like you would any other CSS file under the less file. Remember any future changes will have to be made to the LESS file first, and both files (or just the CSS) will have to be pushed to the server.

Learn More LESS

The LESS docs are very helpful with even more advanced functionality that you can use to make your life creating CSS even easier. Check out the docs at less-css.org