.less CSS – Dynamic CSS for .Net

More than once in the past 6 months I have wanted variables, inheritance, and class chaining in CSS. I was never able to find something that did was I was looking for, and I thought about creating my own, but who has the time? Now I don’t have to, because yesterday I discovered .less.

With .less (pronounced dot-less) you write CSS as you are used to, but you can mix it up a bit to make things a little more clear and concise. For example, instead of having to duplicate the same hex color in a dozen or so selectors, you can define a variable as that color and just reference that.

@brand_color: #4D926F;

    #header {
    color: @brand_color;
    }

    h2 {
    color: @brand_color;
    }

 

If you want to chain your classes together you can simply include one in the other.

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


    #header {
    .rounded_corners;
    }


    #footer {
    .rounded_corners;
    }

 

You can nest your rules to make inheritance a little more clear.

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

 

And lastly you can include some basic operators to give complex relationships to your 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;
    }

 

If that isn’t all, you can configure .less to cache and minify the output. Something I will be taking advantage of for sure.