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.
Subscribe