Too often in my web development past I have found myself wading through huge clumsy CSS files of several hundred lines or more, searching for that place where a particular class is defined or to try and identify what it is that is overriding something else. It can be quite a nightmare. However I recently came across .Less (pronounced "dot-less"), a port of the great Ruby Less library for .NET. This is a brilliantly simple-to-use solution to an often-painful situation.

What Does It Do?

Less gives us CSS-but-better. It takes the standard CSS syntax we all know and adds nesting, variables, mixins and operations. No longer must we violate DRY by copying colours and sizes around throughout the stylesheet or defining and redefining the same inheritance hierarchy.

Using variables, it is possible to define some often-used values throughout your stylesheet (website/company colours for example) and refer to them at various points.

@background_color: #b6e2f8;
@foreground_color: #0a5389;

body {
    background-color: @background_color;
    color: @foreground_color;
}

Using operations, it is possible to define relationships between different values throughout the stylesheet. This is something I've found particularly useful for defining color variations for hovered/focused links, as in this example.

@link_color: #234206;

a {
    color: @link_color;
}
a:hover, a:focus {
    color: @link_color + #141414; /* brighten when hovered */
}

This sort of operation can work on all units, so can affect font size, border widths, colors and whatever else you need to adjust in code. So far, I have only used it for a few things such as highlight/hover colours like my previous example.

Less also allows us to use nesting as you would expect, in place (or alongside) standard CSS cascading. The following two examples would therefore be equivalent.

Less:

.sidebar {
    background-color: @sidebar_bg_color;
    border: solid 1px @sidebar_border_color;
    padding: 0.2em;

    a {
        color: #234206;
    }
}

Plain CSS:

.sidebar {
    background-color: @sidebar_bg_color;
    border: solid 1px @sidebar_border_color;
    padding: 0.2em;
}

.sidebar a {
    color: #234206;
}

Of course, this is only a very simple example. I have found that scaling it up to an entire site gives CSS a much more natural feel and I am actually more productive using it despite having used 'plain' CSS for quite a few years now.

Mixins, as I mentioned at the top of the post, are also provided as well. Basically these take the form of standard CSS classes which you can then use to help build up more complex sets of rules.

.zero_margin_padding {
    margin: 0;
    padding: 0;
}

.sidebar pre {
    .zero_margin_padding;
    /* More styles here */
}

In addition to simple cases like the one above (something I often find myself doing, now with much less repetition), it has been pointed out that this is particularly useful when combined with a CSS framework. I am not one for using these frameworks, but I can certainly see how the two would work very well together.

My Thoughts

I have only briefly run through the features of Less but I think it is safe to say I very much enjoy the power it brings to CSS, all without introducing a whole new syntax or anything particularly unexpected. Now that the .Less guys have created a .NET port of the original Ruby version, we can enjoy Less in both the Ruby and .NET environments. And that can only be a good thing.

There is an alternative in the form of Sass which may also be worth a look, although it is (at present at least) a Ruby-only solution. It adds pretty much all the same features but eschews CSS syntax for a bracket-free syntax, using indentation as the block delimiter. My personal choice is for Less due to the fact that it keeps all the original CSS syntax and just adds new capabilities, but there's no denying the fact both are good and both appear to serve their purpose well.

More information and in depth examples can be found at the Less documentation. I also found Chris Owen's thoughts and insights well worth the read. In addition – particularly for those who want to dive into using .Less in their .NET apps now – check out how easy it is to install. The instructions are right there in the .Less website's sidebar.