.less is more

A little while ago I read about a nice little library called .less, which is a port from ruby less, that lets you write css, but with the added features of enabeling variables, operations, mixins and nesting. Today I decided to try it out, and I definately want to give it my recommendation.

Using variables makes stylesheets a lot more maintainable because it allows you to avoid having colorcodes scattered all around the stylesheet simply by writing:

@listbackground_color: #E3EFFF;

Nesting just makes it more maintainable and gives the stylesheet a better sence of structure like this:

table.MapsList
{
  background-color: @listbackground_color;       
  tr th
  {
    width: 300px;
    background-color: @listbackgroundheader_color;
  }
}

Finally mixins makes it possible to keep the stylesheets more DRY (don't repeat yourself) like so:

.rightBackground { background-repeat:no-repeat;background-position:right; }
th.headerSortUp { .rightBackground; background-image: url(desc.gif); }
th.headerSortDown { .rightBackground; background-image: url(asc.gif); }

An added bonus is that you can toggle caching and minimizing from your web.config.