Set up dotLess in a new ASP.NET project

Overview

dotLess is a .NET port of the less CSS framework. It’s essentially a CSS-like syntax for creating stylesheets supporting inheritance, variables, mixins and simple arithmetic.

Web browsers obviously don’t understand dotLess syntax, so before a dotLess stylesheet is sent to a browser it needs to be parsed into “standard CSS”.

This post walks you through setting up dotLess CSS for a new ASP.NET project. It’s not an in-depth tutorial on dotLess CSS syntax.

Development versus production workflow

In development, we use a handler for parsing dotLess stylesheets on the fly. This allows us to make modifications to the dotLess CSS and then simply reload a page in the web browser to see the results.

In production we exclude the handler and instead use a pre-parsed minified version of the stylesheet. This pre-parsed minified version is updated each time the website project is built.

Include dotLess compiler

Add the dotless.Compiler.exe executable (used to parse and minify dotLess stylesheets) to your project. I choose to keep it together with the MSBuild configuration file(s) as we use it as part of the build script:

Set up dotLess build script for parsing and minifying

When we build the website, we use dotLess to compile and minify the dotLess-formatted stylesheets. We do this by parsing the dotLess stylesheets into a minified version consisting of “real” CSS, with “.min.” added to the filename. Ie, main.css (dotLess syntax) becomes main.min.css (real minified CSS).

The build script for triggering the dotLess parsing is included in the MSBuildStylesheets.xml file: