1 Jul 2009

LESS does actually mean less

In: Web design

I think CSS is the best thing since sliced bread, but sometimes I do find it a bit repetitive, and without a boilerplate or snippet for absolutely everything, it can take a while to achieve the results you want.

But with a great new Ruby add on called LESS you can now create leaner, meaner CSS code using such things as nested CSS rules and variables.

Take this piece of CSS for instance:

#mainnav {width: 960px; height: 200px;}
#mainnav ul {margin: 0px; padding: 0px;
#mainnav li {margin-bottom: 5px;}

With LESS you could nest the rules and write the same CSS as:

#mainnav {width: 960px; height: 200px;
ul {margin: 0px; padding: 0px;
li {margin-bottom: 5px;}
}

Check this piece of CSS out:

#footer {background-color: #353535;}
#h2 {color: #353535;}

With LESS, you can set variables and write the same code as:

@master-color: #353535;

#footer {background-color: @master-color;}
#h2 {color: @master-color;}

Pretty cool I’m sure you’ll agree. You can find out more at: http://lesscss.org/

comments powered by Disqus

Discuss your project with us

+44 (0)1522 518 100

hello@energycell.co.uk