use Less to reduce CSS clutter!

Reading a post by Phil Haack, I learned about a neat technology called LESS that helps reduce the amount of CSS and duplicated code you have to create.  It was originally a Ruby Gem but now has a .Net port called .Less which can be found at www.dotlesscss.com. 

It lets you do some amazing things like global changes and even operations!

Variable:

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

Operation:

@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; 
}