Until recently I was compiling the LESS files using less.js. My colleague Paul pointed out that compiling LESS files with JS is basically intended for development purposes only. So if performance matters, you need to compile your LESS file locally using something like LESS.app or WinLess and upload the compiled CSS file to the server. But then: what if you just want to change a bottom margin real quick? Or work together on the same LESS files? Tediously dragging your files back and forth will soon make you consider that other option, the one you already looked at briefly but then ran away from with your pants full because of all the hocus pocus terms flying around: server side compiling.

Fortunately, there is an easy way out if you are using MODX. Thanks to Debussy and this PHP compiler you can, with a little tweaking, use and edit LESS stylesheets directly in MODX with the performance of a static CSS file. Here's how it's done:

1. Install package and create your main stylesheet

Download and install the lesscss package in MODX and go through the steps in the readme file. In short, they are as following:

• Create a new resource/document in MODX to serve as your main stylesheet.
• Be sure to assign a blank/empty template to your new resource.
• Be sure to change the page type to CSS.
• Add the lessCSS snippet to the content of your new page.
• Set the right folder and file paths and call the snippet cached.

Example:

And don't forget to reference your file in your HTML header:

<link rel="stylesheet" href="[[~120]]">

2. Making adjustments to your LESS stylesheet

You can now edit the LESS file directly if you want to change your styling. The only thing is: you won't see any changes until you clear the cache. Alternatively, you can temporarily call the lessCSS snippet uncached until you finished editing. Don't forget to change it back though, otherwise it will recompile your LESS file on every page load!

3. Optimize performance with microcache

OK, so now we have our LESS stylesheet up and running, and on the surface it seems to be working like any other CSS file. I noticed, however, that there was still a slight delay upon loading each page. The element inspector reveiled that it was the CSS file we just made that was being downloaded again and again. Huh, no browser caching? And then, when I replaced the reference in the header to a static CSS file containing the exact same CSS as the compiled LESS file, the delay was gone. What's up with that?!

It's all in the head

As it turns out, the static CSS file and the CSS file being loaded from the MODX cache (as PHP) have different HTTP headers. If you look at the response headers of the MODX-generated CSS file, you'll see that it's set not to cache that file. With the static CSS file it is. This is default MODX behaviour for the PHP cache files, but in this case, we want to overrule that. Fortunately there already is, yet again, a simple solution available for MODX: microcache.

Installing and configuring microcache

From the readme: microcache is a simple Plugin to set HTTP caching headers, allowing fine-grained control of which Resources are to be sent with which caching headers. For a better introduction, please read this excellent article. It also describes a small glitch in this plugin: you need to manually set the Plugin to listen to the OnWebPagePrerender event. You do this by clicking the Plugin's name in the Elements tree, go to the "System Events" tab, scroll to the very bottom, enable the OnWebPagePrerender event, and save.

4. Why use LESS in the first place?

Because once you get the hang of it, you'll never want to go back to writing CSS the "old" way. I really love how it simplifies and structures your markup, and how it gives you overall control over things like fonts, colors, borders and various fancy CSS3 effects. Trust me, it's awesome!

Don't just take my word for it, I'm sure you'll like this too:

• Cleaner structure with nesting
  With LESS you can nest rules inside each other, creating a hierarchical structure.
• Variables for faster maintenance
  Set things like colors as variables so you can easily reuse and change them.
• Reusing whole classes
  Centrally manage things like border-radius, box-shadow and fancy CSS3 stuff.
• Operations for tweaking your design
  For example: you can make colors lighter or darker, based on your own variables.
• Smooth learning curve
  It uses existing CSS syntax, so getting started is easy and you'll learn along the way.
• One minified CSS file
  Most compilers output minified CSS, so just include all your CSS in the LESS file for optimal performance.

5. Bonus tips

• For any of you interested in the mixins used on this site: here they are. And you can easily find better libraries online, like LESS Hat.
• LESS makes it easy to integrate FontAwesome icons through CSS. Check out our mixins file and this article for inspiration.
• Get better syntax highlighting for your LESS files with the ACE code editor in MODX.