Combining LESS with ASP.NET

Everyone knows how cool LESS is. If you’re not, then here’s the elevator speech. LESS extends CSS with dynamic behavious such as variables, mixins, namespaces and functions, it makes CSS easy to work with. Now, it’s important to remember it doesn’t code your CSS for you – it isn’t a magic CSS editor. You still need to know how to work with CSS. It allows you to write CSS once and use it in multiple places. This is something I’ve wanted for a long time and now it’s here.

There are other libraries which perform similar functions, such as SASS, but I’ll focus on LESS as that’s what I’m familiar with. I’m going to be concentrating on how to use this with ASP.NET.

I’m going to be using Visual Studio 2010 for this demonstration, as I had a few issues using LESS with Visual Studio 11.

Running LESS On the Client

LESS can be run purely on the client or from the server. To run it on the client is a simple three step process.

1. Add a reference to the LESS JavaScript file
2. Update the rel value in the LINK tag to rel=”stylesheet/less”
3. Add a new .less file to your project and reference that in your LINK tag

Updating the rel value to stylesheet/less is necessary because the LESS library looks for this value. Once it’s found it processes that file. Your page should look like this now.

<link href="styles/my.less" rel="stylesheet/less" />
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>

I’m referencing a file called my.less, so let’s define some LESS code to ensure this is working.

@back-color: #000;
@font-color: #fff;

body {
  background-color: @back-color;
  font-size: .85em;
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
  color: @font-color;
}

I’ll skip over the syntax for now, but if you run the website and look in the developer tools, you’ll see that LESS code is being served as valid CSS.

Running LESS On the Server

There are several ways to install LESS on the server. The easiest approach is via NuGet. There’s a package called dotless. Install it with the following command inside Visual Studio.

Once installed, you can remove the JavaScript reference from your page. Also make sure you update the LINK tag and remove the /less from the rel attribute.

<link href="styles/my.less" rel="stylesheet" />

The package has also added some entries to your web.config file. There’s a new configSection defined.

<configSections>
  <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
</configSections/>

<dotless minifyCss="false" cache="true" web="false" />

And a new HTTP handler has been added to cater for .less requests.

<system.webServer>
  <handlers>
   <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
  </handlers>
</system.webServer>

The nice feature about dotless is that it can automatically minify the CSS for you via the minifyCss attribute. If you update that to true and run the website now, you’ll see the minified CSS.

That’s it. LESS is now running on the server.

When To Use It?

I think LESS is great for development, but when you need your site to run as fast as possible, you don’t want to transform each .less request on the fly. This is why I’d recommend using this only during development. The good news is when you install dotless, it installs the dotless compiler. This can be in the packagesdotless1.3.0.0Tool folder in your website folder.

You can add this to your pre-build event from the build properties tab.

“$(SolutionDir)packagesdotless.1.3.0.0tooldotless.Compiler.exe” “$(ProjectDir)contentmy.less” “$(ProjectDir)contentmy.css”

This way you get the best of both worlds.

Before moving away from Visual Studio, there are extensions you can install that gives you the familiar syntax highlighting. LessExtension seems like one of the better ones.

LESS Syntax

I haven’t covered any of the syntax in this article. I wanted to focus on LESS with ASP.NET. Ivaylo Gerchev has a good article on the syntax and that can be found here.

I think LESS is a must tool to have during development. It will make your life easier when coding CSS.