If you're a front-end developer, chances are you've encountered the power of CSS preprocessors. SASS…
In the past, I’ve written about a way to compile SASS on the back-end in WordPress. SASS is a CSS preprocessor which allows you to write more complex features into your code, before compiling a CSS stylesheet. Another popular option is the LESS preprocessor, which offers similar features in a different syntax. If you are using LESS in your theme files, you can use WP LESS Compiler to automatically compile LESS files into a compressed CSS file that is served to users.
What’s it Do?
WP LESS Compiler allows you to specify a LESS file and a corresponding CSS file in the back-end. The plugin then compiles this LESS into the stylesheet of your choice and automatically enqueues this stylesheet to serve it to users. You can compile the LESS file as often as you want, and choose to either compress it or leave it uncompressed. The plugin also allows you to serve LESS files on your front-end (instead of compiled CSS) for either all users or just administrators. I wouldn’t recommend this for a production site, but it adds a few tools that are useful for testing.
How’s it Work?
The first thing you’ll want to do is make sure you have a .less file in your theme’s directory. This can be your default “styles.css” stylesheet or a secondary stylesheet you want to add. Then, add a blank CSS file (if you’ve never compiled your LESS before) to the theme as well, naming it whatever you want. This will be used to hold compiled CSS.
Next, you can install and activate the plugin. To set it up, visit Settings -> Less Compiler. At the top of the Settings page, you’ll see two text fields, one for “LESS Input File” and one for “CSS Output File”. This is where you specify the location of the LESS file you want to compile, and the CSS file it should compile too. Use the “Browse for File” button to browse your theme’s directory, and select your files from there. Keep in mind that the CSS output file will be rewritten every time you compile your LESS. It should not be edited directly.
Below this, you’ll see three radio buttons, “Disable LESS,” “Enable LESS,” and “Enable LESS for administrators”. This is actually a bit misleading. If you choose the Enable LESS option, then your LESS file will be served on your site’s front-end, instead of a compiled CSS file. In general, you’ll want to leave this on Disable, so everything is compressed on the back-end, and then served to users like a normal stylesheet. If you are troubleshooting something, however, you may want to switch on the Enable for administrators option, which lets you dive into your LESS file on your site and see what is causing a problem.
Finally, you can actually compile your LESS once everything is set up. When you click the “Compile Less file” button, then your LESS input file will be automatically compiled to your CSS output file. This will then be enqueued on your site’s front-end and served to users just like any other stylesheet. You can select the “Compress CSS” option to serve a minified stylesheet, which is recommended for performance reasons.
When you’ve made changes to your LESS file, make sure to compile it so that end users can see it. This is another use case for enabling LESS for administrators. If you do, then you can see changes that you’ve made before clicking the “Compile Less file” button, so your live site won’t be affected until you’re ready.
Costs, Caveats, Etc.
WP LESS Compiler is completely free, and the developer has been active in its development. It is one of the simplest plugin’s of its type to set up, and new features are added from time to time. If you’re looking for help, you can visit the support forums to get help straight from the developer.