Using Less, the Dynamic Stylesheet Language, in Concrete5

Having played around with Less for a while, I’m quite taken with it. Especially with useful tools such as Twitter's newly released Bootstrap being optimised to work with it.

Less works with CSS to provide all sorts of neat features such as variables, nested rules, functions and “mixins”, which means less code, and easier to maintain code. So, for example, instead of doing this each time you want a rounded corner:

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px;

You can create a mixin (a lot like a function) once, like so:

.roundedCorners (@radius: 10px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

Then applying rounded corners takes one line:

.classname {
	.roundedCorners;
}

Or, using variables (which would otherwise default to 10px in the example above), you can specify the size of the radius, like so:

.more-rounded {
	.roundedCorners(15);
}

Where Less can really come into its own is when building semantic responsive layouts – but that’s a whole separate post. Besides this post isn't about Less, so much, as how to go about using it with Concrete5 (though some of the principals I’m covering apply to other frameworks and CMS's). Concrete5 – probably my favourite CMS at the moment – has no support out-of-the-box, and nor did there seem to be a third party extension offering this functionality; so I decided to build it.

Before Less is any use it must be compiled to CSS. There are three possible ways of doing this; using the Less JavaScript library, using Node.js or using a server-side compiler. I picked out the third option as in some ways it’s safest; if you’re running in a PHP environment then handling the compilation server-side means you don’t have to worry about the client side – such as the user having turned off Javascript.

So, I took the excellent LessPHP library from Leaf Corcoran, and created an add-on so that this could be installed and used within Concrete5.

The package contains the necessary PHP compiler in its libraries folder, so all you need to do is include a Less file using the package’s helper in your template’s head section, thus:

$less = Loader::helper("less", "less"); ?>
print $less->link('styles.css.less'); ?>

In the example above, styles.css.less is in the theme folder (it seems most likely this is where you would be using Less), but you can also process a Less file from a package by passing in the package handler.

So what does this do? Well, it matches the Less file specified to a corresponding CSS file and if that doesn’t exist, it generates it by compiling the Less file. If the CSS file exists and is more recent than the latest update to the Less file, it uses that – no need for it to recompile, which would severly impact performance. However if you have made a change to your Less file then the resultant CSS will be recompiled for you.

One caveat; there is some overlap with Concrete5’s CSS handling, whereby you can, for example, create a theme with a configurable colour scheme by “exposing” the relevant CSS rules to make them editable in the CMS. Less offers something different, however, and because of this, and the fact that it would be difficult to run both features side-by-side I’ve made no effort for the two to play nicely together. There is nothing to stop you linking to a set of base styles in Less format and then adding a configurable CSS style, though.

If you want to try it out, you can find the source on Github. It will hopefully be available through the Marketplace soon (free of charge), once it's gone through the approval process. Let me know if you have any questions!

UPDATE: this add-on has been approved, and is available here.