Mattias Rost

Researcher and Coder

LESS (CSS)

Posted on 2011-09-27

Found this handy javascript library that I think can be extremely potent: LESS. It basically gives scripting capabilities to CSS. For instance you can define a variable @color, and use that instead of using fixed values everywhere in your CSS file. This would ease when it comes to changing color schemes, for instance. But I think what will be most handy is the way it allows nested rules:

[sourcecode language="css" light="true"]
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover { border-width: 1px }
}
}
}
[/sourcecode]

which basically defines the css-rule for e.g. "#header p" and "#header p a:hover". This will make cleaner css-files, and will let you write less CSS making CSS more DRY. It comes with a lot more powerful stuff as well like inline javascript. Have a look for yourself and see how you can make use of it.

Fairly technical post, but I wanted to put it down in text as I found it and reacted to it.