A preprocessor can make your life easier when writing CSS. At today we can choose between LESS and Sass, and while Sass is still slightly more powerful than LESS, the latter is easier to handle and implement, specially for fast prototyping.
This article is about how to quickly use LESS while developing in 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).
Enqueueing the necessary files via
wp_enqueue_script() is unlikely to make us happy, because the order in which you include the
style.less and the
less.js files is critical. The latter has to strictly follow the former.
So how do we rapidly click LESS into a WordPress theme, relax, start playing around, and finally kicking development?
Use LESS with a WordPress theme, the simple way
A method, perhaps elementary, to do so is to add a little of code to your
functions.php file, like explained here. It is not literally elegant, but it works just fine. And it is simple.
However, if you are moving your first steps with a preprocessor, you may want to take advantage of what a preprocessor can actually do for you. Like managing multiple files/modules and variables.
So let’s keep all apples in the same basket.
Adding less.js to your theme folder
Create a new folder, name it
lesscss and move it into your theme folder.
In it copy and paste the file less.js and all the less files you may need to use, like browser reset, modules, and the main stylesheet you are going to use, the file
../lesscss/ - less.js - styles.less - reset.less - typography.less - layout.less - grid.less -...
less.js does not correctly handle
.css files as expected. To fix that I rename the extension of any
.css file into
.less, even if the content is still plain CSS.
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 much with future releases.
Loading the juice
Next step is to load all we need into the
HEAD or the page. Add the following function to your
Done that you are ready to go. Open the file
style.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
LESS, preprocessors, and production
Preprocessors are meant for development. Before going live I feel like recommending cleaning up you codes, minimizing and compressing it, and ultimately using a plain optimized CSS file. You can use less.js live, it works, but it is not recommended. Please see the links below for furthering your LESS skills.
Also, be aware that WordPress will still load the file style.css (located in the root of the theme). This file is required because it contains the details of the theme, commented at its top.
You can remove it from the HEAD of your pages, adding the following line to your
wp_dequeue_style( 'style.css' );
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