LESS – Better CSS

A few weeks ago, I sent out an informal Twitter poll asking which CSS preprocessors people were using – LESS or SASS.  With LESS being the clear winner,  I decided give it a try. I had heard several comments on how easy it was to use. I’m please to report this is all true.

So what is it?

In a nutshell, LESS is allows you to write CSS using variables, mixins and operations, among others. I use Coda as text editor so I was very happy to find LESS.app, which is a neat little app that takes care of compiling and even minifying your LESS file into a css file.

Bonus: Ever spent a ridiculous amount of time scratching your head because your css wasn’t doing what it should? More often than not, a minor typo is messing things up. When you compile with LESS.app it’ll actually let you know when you’ve messed up.

A few examples:

Variables

This is pretty straight forward. Using variables eliminates the find-and-replace-and-cross-your-fingers-you-don’t-mess-anything-up situations. It also alleviates some of the stress of hearing your client says “could we try that in a darker color?”.

@green: #88a126;
@blue: #C7D0DA;
@darkBlue: #657a91;
@fullWidth:640px;

Operations

@bgColor:fadeout(@white, 20%);

Which translates to:

  background: rgba(255, 255, 255, 0.8);

Mixins

Mixins are a class within a class. A great example for where this comes in handy is when using css3 vendor prefixes. Having to rewrite each line can become somewhat tedious. With mixins, you’d declare all those prefixes like so:

.Transition (@speed:0.3s) {
	-webkit-transition: color @speed linear;
	   -moz-transition: color @speed linear;
             -o-transition: color @speed linear;
	        transition: color @speed linear;
}

And then you would use it in your stylesheet like so:

a:hover {
    .Transition(color @speed linear);  /* Look ma! One line! */
}

You can even define a different variable within the stylesheet. Here we’re changing the speed of the hover transition color.

a:hover (@speed:0.2s;){
    .Transition(color @speed linear);  
}

Nested rules

LESS lets you nest your styles. This gives you a more concise structure in your stylesheet:

a {
    color: @green;
    text-decoration:none;
    &:hover { 
        background-color: @blue;
	color: @white;
	.Transition
	}
}

The one this I will say about nesting your rules is not to go overboard, as it can get confusing real fast if you go too many levels deep.

And so…

The above example are only scratching the surface of what LESS can do. There are a ton of great tutorials out there (for ex: here and here) that show you a more in depth look at how to use LESS. You can also check out the official LESS documentation.

I’ve only just begun using it and still have lots to dig into. But I highly recommend add this to your regular workflow.