Dot Less and Minifying CSS

A colleague introduced me to this wicked library for css files. If you are lazy like me, this tool is a great way to use variables in your css code so that you dont end up repeating yourself. Taken directly from the site: http://www.dotlesscss.org/

"Write regular CSS with your .NET apps, then add a few variables, mixins and nested rules. less (pronounced dot-less) is a .NET port of the funky ruby LESS libary"

Here is an example of some code that could be used in your css files:

@brand_color: #4D926F;
 
#header {
  color: @brand_color;
}
 
h2 {
  color: @brand_color;
}

You could also us nested rules:

#header {
  color: red;
  a { 
       font-weight: bold; 
       text-decoration: none; 
    } 
}

Dot less also has other great features built in such as mixins and operations. The operations let you perform mathematical operations such as add, subtract, multiply etc. This is very exciting stuff for css files! I've had a great time playing around with this.

Implementing this in your solution is an easy process. Simply add a reference to the dotless.Core.dll. Then link like any style sheet in your page / Master page.

<link href="../css/screen.less"rel="stylesheet" type="text/css" media="screen" />

Update your web.config httphandlers.

<add  type="dotless.Core.LessCssHttpHandler,dotless.Core"  validate="false"  path="*.LESS"  verb="*"/>

Here are some more details from one of the creators of the tool: http://enginechris.wordpress.com/2009/11/23/my-thoughts-on-using-dotless-and-the-less-syntax/

I also came across this awesome post by Phil Haack: http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

He has created a T4 template to minify the created .less files into .css again. If you are lazy like me, this is a great way to do this automatically. Just drop the template into your relevant folder and it will pick up the .less files and minify them for you as .css files. It uses the YUI Compressor for .NET to compress the files.