A few week’s ago a wonderful story went viral about a boy named Caine, a nine-year-old kid who runs a homemade cardboard arcade out of his dad’s auto parts garage. Nirvan, who happens to be a filmmaker, came across this and made a short film about Caine and his arcade.

A site was setup on wordpress.com to help raise money for a scholarship for Caine and to give updates on the story. A friend emailed me to let me know they are using my Liquorice theme for the site!

Check out the movie here.

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.

Haymaker

Absinthe

Satellite

Novecento

It’s nice to be important, but it’s more important to be nice. ~Author Unknown

Click here to view the embedded video.