Ultimate super basic introduction to LESS

LESS is really easy to get into but if you want a super fast point of entry before diving into the syntax why not stick to what you know and try it out using plain old CSS first?

1: Get a LESS compiler

First you’ll need a free LESS compiler. LESS.app  is good to go until 2015 for OSX ( after that it turns into a pumpkin ). If you’re into all that Windows business then WinLess does the same trick. If you’re a Linux head you can probably do all this in binary with a divining rod or whatever it is you do.

2: knock up a couple of files

You can set up a dummy web page if you like but let’s just get on with a quick bit of LESSing about shall we?

Create yourself four files, for example:

  • header.less
  • content.less
  • footer.less
  • style.less

The compiler just needs .less as an extension ( don’t worry you’re still going to be writing some CSS )

By the way, I do hope you’re saving all of these in the same folder.

3: Style according to taste

In each of your .less files just add some random classes and a few settings. It doesn’t matter what as long as it’s valid CSS ( if you’re doing this with a dummy HTML page why not style that? ).

For example in header.less:

in content.less:

and lastly in footer.less:

What about style.less? Read on…

4: Start your LESS compiler

Fire up your LESS compiler and add your folder to your watched LESS files ( “Add Folder” in WinLess, “+” in LESS.app ).

Ideally only the style.less file should have a check mark by it. Want to minify? Check that too, why not?

OK, are you ready to do some magic?

If you are a seasoned CSS warrior you’ll know that if these were .css files you could @import all of them in one further style sheet.

This is great and all you say but blah blah server calls, hosting bandwidth yada yada. I know. Just be quiet a minute and look what happens next.

Add the following to style.less ( it’s OK, I’ll wait ):

Save it.

Now take a peak in your folder and see what auntie LESS has baked you, that’s right, a fresh little style.css file ( did you see the puff of purple smoke too? Just me? ).

Lets have a look at what’s inside ( or this is what you’ll see if you went for the minified option ):

Woah! Yeah?

You feeling that?

Now think back to that web site you’ve got with a bajillion imported, uncompressed css files and multiple style links in the head.

Yep, the whole lot in one tidy CSS file and all minified if you so desire.

Now that’s before you’ve even looked at LESS variables, mixins and all that other heady stuff.

If you think you can handle it then this tutorial over at tutsplus would be my first port of call for a well explained and pretty comprehensive overview of LESS.

I think you’re ready 😉

Leave a Reply