Inspired by a resent blog post by Stefan Kip and a conversation with Geert Pasteels on twitter, I thought it was about time I had a play with .LESS and some js/css minification for my sites.

One of the things that did bug me about Stefan’s post though was the use of Squishit for compressing the js/css files, when Umbraco already has a compression framework built-in thanks to the Client Dependency Framework built by the guys over at The Farm. Now, I don’t have anything against Squishit, but I just don’t see the point of including another library, when there is a great solution available straight out of the box.

Now the setup isn’t exactly tricky, but I think sometimes it just takes a little example for people to see how easy it is to kick-start them to give it go, so here is how I did it.

.LESS

So first off, you’ll want to go download the latest version of .LESS from www.dotlesscss.org.

To install, simply drop the DLL’s into your bin folder and setup the HTTP Handler in your web.config as follows:

IIS6
<configuration>
 <system.web>
 <httpHandlers>
 <add verb="*" path="*.less" type="dotless.Core.LessCssHttpHandler, dotless.Core" validate="false" />
 </httpHandlers>
 </system.web>
</configuration>

IIS7
<configuration>
 <system.webServer>
 <handlers>
 <remove name="DotLessCss" />
 <add name="DotLessCss" verb="*" path="*.less" type="dotless.Core.LessCssHttpHandler, dotless.Core" preCondition="integratedMode" />
 </handlers>
 </system.webServer>
</configuration>

Client Dependency Framework

To use the Client Dependency Framework, you’ll first need to register a couple of assemblies at the top of your master page as follows:

<%@ Register TagPrefix="umb" Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" %>
<%@ Register TagPrefix="umb" Namespace="umbraco.uicontrols" Assembly="controls" %>

Followed by an UmbracoClientDependencyLoader control at the top of your head tag like so:

<umb:UmbracoClientDependencyLoader runat="server" ID="ClientLoader" />

Putting them together

Once everything is set up, you can then just add a reference to your .less file(s) using the CssInclude control

<umb:CssInclude ID="site" runat="server" FilePath="~/css/site.less" />

And that’s it. I did say it was going to be simple =)

One thing to note is that the Client Dependency Framework will actually make a HTTP request to load the .less file which is a little slower than reading from the file system, but as the result is being cached, I really don’t see this as a problem. On the plus side, because it is using a HTTP request, the Client Dependency Framework has no dependency on the .LESS dll’s, so you are free to update to the latest version as and when they are released.

I’ve been meaning to play with .LESS for a long time, and having started to build production sites in Umbraco 4.5, these are definitely a couple of techniques I’ll be using a lot more of in future.

I hope this post helps to kick-start your switch over =).

umb: