LESS is defined by its creator as “The dynamic stylesheet language”. In other words a method to write CSS using variables, functions and improved classes. I loved it from day one and I pondered about how to implement it into my development and workflow with WordPress.
I believe that a preprocessor can dramatically facilitate writing and managing stylesheet files. Indeed, I could go for LESS or SASS, and at the present day I decided to give a go to the former. Time will say if I am making a wise decision.
But first, what is LESS?
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. It runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
So, it should be trivial to implement it into a theme for WordPress, right? Well, my first attempts did not brilliantly succeed. So I found out how to simply solve my impasse.
Use LESS with a WordPress theme, the simple way
If you want to rush and use LESS with your themes you can follow a simple, perhaps elementary method to do so that in return lets you relax and start kicking development.
As explained clearly on lesscss.org the order in which you include the
stylesheet.less and the
less.js files is critical. The latter has to strictly follow the former. Using
wp_enqueue_script() it is unlikely to give us the desired result.
So, even if someone would say that it is not elegant, my solution is simple and works just fine.
Adding less.js to your theme folder
Create a new folder, name it
lesscss and move it into your theme folder.
Into it place the file less.js and all the less files you may need to use, like browser reset, and the main stylesheet you are going to use.
../lesscss/ - less.js - stylesheet.less - reset.less - and so on...
It is nice when everything that fits together stays together, isn’t it? As a note,
less.js does not deal as expected with imported
.css files. So I just change the extension of everything that needs to be imported in
.less as well.
At the time of this article (October 2011), the last release of
less.js is 1.1.3, and you can download it from lesscss.org.
Loading the juice
Next step is to load the goodness into the
HEAD or the page. In
functions.php add the following function.
Done that you are ready to go. Open the file
stylesheet.less with an editor and start playing with it.
In the function above I added the block for refreshing automatically the page when saving the
stylesheet.less file. Better removing it in production.
Done, get out and play with it!
Hopefully this will help someone. I am having quite a fun experimenting with LESS. It is already improving my workflow and I am very happy about.
Thanks for reading, and as usual, if you have any comment or would like to suggest a better method, please do so using the comment area.
Resources for LESS
- LESS.app for Mac OS X
- Less.js Will Obsolete CSS
- The Semantic Grid System
- LESS Elements, a collection of useful LESS mixins
- Using the LESS CSS Preprocessor for Smarter Style Sheets
- An Introduction To LESS, And Comparison To Sass
- The Semantic Grid System: Page Layout For Tomorrow