Cloudy Developer

Working LESS with WebMatrix

I’ve been doing some CSS work recently and wanted to try out some of the newer utilities that are supposed to make managing CSS files easier. LESS is a popular one as it allows you to use variables, mixins and a few other constructs to make your CSS coding more enjoyable.

With the WebMatrix v2 release, support was added for working with LESS. When adding a new file to a web site, we have a LESS file template as well as syntax highlighting and intellisense in the editor. Goodness all around.

Knowing nothing about LESS, I went to their website to see how to set it up and of the two options listed on the Usage page, running it client-side or server-side, I chose the former because it was first in the instructions and the latter only talked about it in the context of a Node.js site and I’m using WebPages.

So I added my LESS file to my site, added the stylesheet link to it in my markup as well as a link to the LESS js file. Then, I started run my site and saw zero CSS styling. Using the browser tools in Chrome, I could see the client side request for the “.less” file failed. I made a direct request for the file via the browser and this returned:

Bummer.

Fortunately, this error was descriptive enough to point me towards the culprit – a missing MIME map for the “.less” extension. Simply adding this to the IIS Express “applicationHost.config” file did the trick.

With this working, the other question to ask is whether or not processing the LESS file to generate CSS on the client is the best design. I haven’t thought through all of the pros/cons of this versus a server side processing approach, but my gut tells me doing this server side is probably a better choice.

So can we get the server-side design working? Well, with WebMatrix we’re in luck, because a nice extension has been written to automatically produce a corresponding CSS file whenever a change to a LESS file is saved, and here’s a write-up on How to Use LESS CSS in WebMatrix that explains this. If you’re going to be actually using LESS in your web site, this is the way to go. In this post I just wanted to point out the one roadblock you would run into if you were simply trying the client-side approach.

Hope this helps,
Mark

04. October 2012 by Mark Berryman
Categories: CSS, LESS, WebMatrix | 3 comments