DRY CSS == .LESS

Lots of talk regarding the .LESS (pronounced dot-less) library has prompted me to finally get around to incorporating it within one of my projects - and I'm impressed. .LESS extends on CSS, making your CSS dynamic. It allows you to work with your CSS more easily and without needing to repeat yourself by way of 4 powerful language enhancements:

Variables

Variables specify widely used values in one place such as site colours.

@companyRed: #eeeeee;

h1, h2   { color: @companyRed; } 
#banner  { color: @companyRed; }

Mixins

Collecting sets of rules within a class and allowing other rules to add that class as a property.

.myMixinClass { 
   color: #ffffff; 
   text-align: center; 
   font-weight: bold; 
}

#banner   { .myMixinClass; padding: 30px; }
#footer   { .myMixinClass; padding: 0px; }

Operations

Perform simple math operations between related properties.

@defaultBorder: 1px;
@companyRed: #eeeeee;

#banner {
  color: @companyRed;
  border-left: @defaultBorder;
  border-right: @defaultBorder * 2;
}

#footer { 
  color: (@companyRed + #111) * 1.5;
}

Nested Rules

Avoid long selector names for specifying inheritance, allowing you simply to nest the rules making the CSS a lot more readable.

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

How does .LESS work?

These language enhancements are parsed and converted to valid CSS on the fly, or can be pre-compiled. It's amazingly easily to start working with and the homepage has all the info you'll probably ever need on .LESS - it really is that simple :)

Performance?

.LESS removes comments by default and has built in support for minification and caching via the optional config values. Although if you are serious about performance I'd suggest using .LESS to compile your .LESS files to .css during the build and leave the caching and compression to IIS.

Gotchas to avoid...

• Visual Studio 2008 won't know what type of file a .LESS file is, which means it opens it as a plain text file. There is a .LESS Visual Studio Integration Pack (if it asks you to login then click 'login as guest') that I recommend you getting so you have syntax highlighting at least - but I'm afraid intellisense won't be able to help you here.
• Remember to make sure IIS is setup to forward .LESS resource requests to the ASP.Net engine (if you are working on MVC apps then it will by default).
• Visual Studio won't set a build action on .LESS files, so remember to set build action to 'content' or the files won't be deployed.
• As .LESS parses the file I noticed it fell over (didn't process the rest of the CSS file) on this particular CSS hack "border:none!important;" so you may need to rethink your hacks if .LESS doesn't like it.