Single post
LESS & Stylesheets
Having used a couple of different web design frameworks, I’d come across LESS but had not taken the time to properly understand it till now and really, can’t understand why it wasn’t till 2009 that it appeared (or 2007, for the original, SASS).
The website for the language is at http://www.lesscss.org/ though for a really good overview, I can recommend the wikipedia article on LESS.
In a nutshell, with CSS you’ll be repeating the same thing again and again. For instance:
#header
{
background-color:#fcfcfc;
color:#313131;
}
h1
{
background-color:#fcfcfc;
color:#313131;
}
but with LESS you can just use a variable:
@bg: #fcfcfc;
@fg: #313131;
#header
{
background-color: @bg;
color: @fg;
}
h1
{
background-color: @bg;
color: @fg;
}
Repeated over a whole stylesheet, this can lead to considerable savings in space and coding time. It also means that changing all the colours in one go is as simple as changing the variable.
The other main features worth noting are mixins, where you can embed a whole set of properties into different CSS rules and the ability to use algebra in setting values.
A LESS stylesheet can’t be read by a browser but can be interpreted either client-side or server-side by javascript code in the browser or a program on the web server, though for speed, in a production setting I would opt for compiling and minifying before release.