Introducing LESS: a Better CSS

I don’t know about you but I’m not really satisfied with the level of control CSS gives me today. The feature set is just too restraining, and while I know how to use it to create anything I want, there is always plenty of code which I wish I didn’t need to duplicate, or I wish I could have written more elegantly.

It’s not so much the lack of fancy styling options like shadows and rounded corners, which are there in CSS3, it’s things like the lack of variables and ugly long inheritance selectors.

Can’t do much about that, right? Well, actually… Some bright folks also feel the same pain and went ahead and built meta-languages and compilers that take their own version of CSS and compile it to standard CSS code. Their own CSS meta-language is thus able to have new features, like variables, mixins, operations and so on. The most notable of these right now is SASS (part of HAML).

I’ve tried SASS and really liked it, but one thing really bothered me. I didn’t like how all the syntax was different to CSS. Sure, it’s not CSS anymore, it’s SASS, but do we really need to change the syntax of the stuff already present in CSS – why not just expand it?

I’ve asked my friend Alexis Sellier, an exceptional programmer, how long it would take to code a CSS compiler that retained the original CSS syntax but added a bunch of new features. He liked the idea and went ahead and created a variant of CSS we call LESS, which stands for Leaner CSS.

LESS Features

LESS augments CSS with 4 main features: variables, mixins, nested inheritance and operations.

Variables let you specify values in one place, like color or widths, and then re-use them throughout the document. So you could for example specify a palette at the top of the file and then re-use it around the stylesheet. Changing the value of the variable will affect all the other places you’ve used it in, making global changes quicker and easier.

Mixins are classes that can be embedded in other rules. The syntax is the same as a class (it actually is just a class, “mixin” is just the term used for the feature), and so by referencing that class name in another rule set you can “mix-in” all of the properties of that class to that rule set.

Nested inheritance is where instead of writing out each rule set separately you nest rules inside one another. This makes the structure of the stylesheet more organized and easier to understand.

Operations are just that – operations: division, multiplication, addition and subtraction. This helps you set up declarations which may be tied to sizes or colors of other declarations.

I’ve briefly outlined each feature above, but I suggest you check out the LESS site as it features code examples to make each of the above clearer. LESS looks just like CSS, and the syntax we picked for the extra features is very CSS-like. This means you can rename your existing ‘.css’ files to ‘.less’ and start using the new features.

How to get LESS?

To compile LESS files to CSS we’ve got a Ruby gem. You’ll need Ruby installed to use it. The gem will compile ‘.less’ files to ‘.css’. It also has a watch feature that will automatically run the compile when it detects changes in the LESS file. Check out the LESS site for instructions on installing and using the gem.

Is it ready for production use? Well.. let’s just say LESS is just fresh out of the oven and it’s probably worth waiting a little for it to cool down. All the features above work and it was of course used to build the LESS site, but because it’s an early version I’m sure there will be bugs that need fixing and stuff that will need changing – but it’s there for those who want it and can make use of it. It’s also open source so feel free to grab the source at Github and contribute. Would love to hear your feedback and suggestions, so go ahead and post your thoughts here and on Github.

UPDATE (28 Jun 2009): Tripeedo wrote a web based LESS compiler for those who don’t use Ruby. Here it is.