.less - Dynamic CSS for .NET

Link: http://www.dotlesscss.com/

There is a Ruby library (LESS) that gets a fair bit of buzz in Ruby circles.  It's purpose is to introduce the DRY principle into CSS but also adds a lot of other useful features.  Well now there is a .NET port of it - so what can it do (ripped from the original page as this pretty much sums it up)?

Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

And variables are a god-send in CSS world though other people disagree (http://www.w3.org/People/Bos/CSS-variables) - but at least this is still generating plain old CSS for consumption

Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It's just like variables, but for whole classes.

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Operations

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to do create complex relationships between properties.

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

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

Operations are "OK" i guess but I am not sold on them.

Nesting

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

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

I like the nesting as it moves the structure closer to the nexted DOM tree format that you are actually trying to map against

Compression & Caching

Now you can configure if you enable Caching and minifying or the CSS output.

<dotless
    minifyCss="false"
    cacheEnabled="true" />

It's still in beta and I haven't had a chance to properly tinker with it but it's a great idea as CSS bloat is something that is often overlooked and can make rebranding a nightmare if not carefully managed.  I might post more on this when I get a chance to have proper play with it.