{less} extends CSS

While CSS3 continues to evolve in interesting and powerful ways, it still clings to some conventions that make it more like a set of markup conventions and less like a programming language. That is, while you can describe a lot of things in CSS, you typically have to do so verbosely and somewhat redundantly. You cannot, like most modern programming languages, compress your efforts, pass variables, create something like objects.

For those who either run Ruby or, like me, are confined to admiring it and continue to try to learn it, [`less`](http://lesscss.org/) is available for installation and use and what it does to, or for, CSS is nothing short of amazing.

For one thing, you can set up variables for things used site-wide that allow you to establish, as in the example below, all your colors in one place:

@brand_color: #4D926F;

#header {
color: @brand_color;
}

h2 {
color: @brand_color;
}

Or you can use something they call *mixins* which operate like some sort of powerful hybrid of variables and functions — note how you can pass an argument to what looks like a variable:

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners(10px);
}

Finally, for me at least, there is the opportunity to nest selector names in a way to make inheritance more obvious:

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

(Nothing kills me more than trying to figure out inheritance of an item that just won’t style for me because I’ve missed some piece of the CSS flow in my analysis.)

Check out [`less`](http://lesscss.org/) for more.

Leave a Reply