As a software developer, using CSS can sometimes be frustrating as it violates the DRY principles, with a typical CSS file containing a lot of duplication. Fortunately there are a suite of frameworks that can help;
CSS extension languages that compile down to standard CSS. LESS CSS is one such framework. A LESS CSS file looks quite similar to a normal CSS file, except that it adds some additional features to the CSS language, which gets complied
into standard CSS that your browser will understand. LESS CSS introduces four main features; variables, mixins, nested rules and operations. Let's have a quick look at each.

Variables

Variables allow you to define values in a single place, and re-use them elsewhere. You can use variables for any style value, whether it be a RGB colour code or a font-family declaration. Let's look at an example:

Mixins

Mixins allow you to re-use several sets of styles as a named unit, so that you can include whole classes into other classes. Even better, a mixin can take parameters so that they act much like a function. Let's look at an example:

Operations

This powerful feature lets you define style values with an expression, which means you can set style values based on numerical operations on one of your variables.
Rather usefully, you can also apply these operations to colour values, for instance you can define a colour variable that is 50% darker than another colour variable you have declared. An example:

Integrating with ASP.NET

So all of this is great, but how do I actually use this in an ASP.NET app? The official LESS CSS implementation is in Ruby, but there is a .NET port called dotLESS to make it easy to integrate with ASP.NET. You can download
the required assemblies/tools from the web-site, but it's probably easier to use NuGet to add the dotLESS package to your project. There are two ways that you integrate LESS CSS files into your app,
either you can use an HTTP Handler to compile your LESS CSS files on-the-fly, or you can set-up a post-build action to compile your LESS CSS files prior to deployment. Let's look check out both options:

1) HTTP Handler to compile LESS CSS files on-the-fly
Ensure you have added dotless.Core as a reference, and ensure that your web.config file contains the highlighted lines:

The above configuration will route any http request ending in ".less" coming into your site to run through the dotLESS compiler to be converted into standard CSS. We've also specified that the CSS should be minified and cached for maximum efficiency.

2) Post-build action to compile LESS CSS files before deployment
Given that CSS files rarely change after an app has been deployed, a good solution is to compile your LESS CSS files before deployment. The advantage to using the HTTP Handler method is that you land up with normal static
files, which IIS can serve more efficiently than running through a handler, and it also means that you files can be hosted externally, e.g. on a CDN. The simplest way to achieve this is by using a post-build action on your web project. dotLESS ships with a command line tool to compile LESS CSS; if you used NuGet to
add dotLESS to your solution, the executable can be found at {solutionPath}\packages\dotless.1.1.0\Tools\dotless.Compiler.exe).

So in Visual Studio, open the properties of your web project, go to the "Build Events" section, and the in the section "Post-build event command line", insert the following line:

Every time the project builds, this command will compile any .less file in the \content folder into a corresponding .css file, minifying it as well (with the -m switch).

During development this post-build approach can be frustrating as any changes you make to your .less files while your app is running are not reflected until you next build the project. Fortunately dotless.Compiler.exe has a -w switch which watches for changes
to your .less files, so you can make changes without having to rebuild.

TIP
You don't actually have to use the extension .less, you can use anything. Visual Studio doesn't know how to handle .less files, so it treats them as a standard text file. If you use the naming convention {filename}.less.css, then Visual Studio
will treat it as a standard CSS file and provide some formatting and intellisense. Sure it's not perfect as Visual Studio doesn't know how to handle the LESS specific features, but it's still better than nothing.

So now I can reference the ".less.css" file in the html and it works on the site. That was probably what you meant in that TIP, I just wanted to try and make it work completely like that so I could use the css syntax that's already built into VS.

Thanks!

Thursday, 08 December 2011 03:32

lesscss

thanx for ur help....

Tuesday, 26 March 2013 07:33

Nacho

:(I have VS 2012, I installed with nuget the less (this added the lines in web.config), but the styles not apply.I can open the .less file in chrome and see the code, but the styles never apply :(Why!

Thursday, 25 April 2013 17:38

Borito

Hey Nacho,did you link up the less css to the page?

Wednesday, 21 August 2013 21:34

Hatem

Where should i place the <add....>in web.config ?

Saturday, 17 May 2014 17:03

G10

Just wanted to make a note here. The command mentioned in the step-2 will not work with MS Visual Studio Ultimate 2013 running in the integrated mode. You will have to put the compiler path in the double quotes as shown below. I have omitted the output css file name because it automatically names it general.css based on general.less

I'm Jono, a South African developer living in London. This blog is my collection of thoughts around .Net/jQuery development, tech startups and gadgets. Feel free to contact me on jonoward [ at ] gmail dot com