CSS preprocessors are awesome. You should use them.
LESS is also the easier to implement of the two.
This article is about how to quickly implement LESS within your development for WordPress.
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).
The order in which you include the
style.less and the
less.js files is critical.
So how do we rapidly add LESS to a WordPress theme and kick in some good development time?
Use LESS with a WordPress theme, the simple way
An elementary method, which also is easily reusable, involves a bit of code to add into the functions.php file. It might not be the most elegant way, but it is simple and it works.
Also, since you're using LESS, you may want to properly organize your files each in its appropriate folder.
So let’s keep the apples in their own basket.
Create a new folder within your them, and call it less.
Copy and paste in it the file less.js and all the other .less files you will use, like reset.less, modules, and the main stylesheet, which I'll call style.less.
less/ less.js styles.less reset.less typography.less layout.less grid.less ...
At the time of this article the last release of less.js is 1.1.3, and you can download it from lesscss.org. What explained here should not change with future releases.
Loading the juice
Now we need to load all we need into the markup of the page, within the
HEAD. We do that with the following code to add to your functions.php file.
Done that you are ready to go. Open the file style.less with an editor and start playing with it.
This implementation should also automatically refresh the page when you save a change to style.less.
LESS, preprocessors, and production
Preprocessors are meant for development. Before going live you want to clean up you code, minimizing and compressing it. It is recommended to use plain CSS for production.
Also, be aware the file style.css is still required because it contains the details of the theme.
However it is not necessary for a theme to run, and it can be removed from the the
HEAD of your pages, adding the following line to your functions.php file.
wp_dequeue_style( ‘style.css’ );