John On Web Stuff

Less is a CSS pre-processor that I came across a short while ago and there is quite a bit of buzz going around about it, including some discussion at Sitepoint about what is good about it, what really sucks about it, and so on.

After seeing some of the drawbacks, and the advantages of using Less, I’ve decided that it should be put through it’s paces and I’ll be trying to use it in a project in the near future so I can see if it will be a benefit.

A quick breakdown of what Less is

Less adds variables, mixins, operations and nested rules to CSS. This will enable us to treat our CSS a bit more like a programming language rather than a style descriptor language.

Compiling

You write Less in to a .less file and use the Less compiler to turn it into a .css file.

Worried about having to compile all the time? With the Less compiler, simply set the ‘watch’ option on the command line and it will keep tabs of your .less file and compile it whenever there are changes.

To do a quick compile:

$  lessc styles.less my_styles.css

You can leave the name of the css file off, if you do, Less will use the same filename as the .less file, with a .css extention of course. To watch a file:

$  lessc styles.less --watch

Variables

Variables in CSS are an fantastic concept, I can’t believe that they weren’t part of the CSS spec in the first place! For example, by being able to define a colour or width in a variable, you can save yourself a lot of time and hassle. Seriously, who wants to remember that the brand colour for your current client is #0062fc? Consider the following CSS that you would normally write:

p { color:#0062fc; }
h2 { color:#0062fc; }

You would write this in Less as follows:

@brand_colour: #0062fc;
p { color:@brand_colour; }
h2 { color:@brand_colour; }

This is of course a very simple example, I’m sure that if you think about the implications of this, that you’ll see how powerful having variables in a language like CSS really is.

Mixins

Mixins are essentially rules that are included in other rules. Instead of doubling up on writing the same bit of code for several items, you include the code that is generic in the other class. Think of it a very simplified extending of classes in OO languages.

.bordered {
  border:1px solid #000;
}
.box {
  .bordered;
  width:200px;
  height:200px;
}

Nested rules

You can also nest rules with Less, meaning that you’ll have to write less code and you can write code that is cleaner to read. For example:

#sidebar {
  color:#000;
  p {
    color:#00c;
  }
  q {
    font-style:italic;
  }
}

This would be compiled to:

#sidebar { color:#000; }
#sidebar p { color:#00c; }
#sidebar q { font-style:italic; }

Operations

You can perform all sorts of operations on numbers, colours, pixel values. This will allow you quickly do things like set something to the same width as the main wrapper minus an arbitrary amount.

@main_page_width: 800px;
@sidebar_width: 200px;
 
#content {
width:@main_page_width - @sidebar_width;
}

As you can see Less can be very helpful in writing CSS, rather, writing less CSS to achieve more, quicker. Since you don’t have to spend a lot of time learning the syntax of the language, you can get right on with coding!

Make sure you check out the Less website for more information.

Less runs on Ruby, and has to be installed as a Ruby gem. I have had a play around with this on my Macbook, I have yet to give it a whirl on my Windows machine to see how easy this is to use on that platform. You don’t need to build your website using Ruby, or Ruby on Rails, you only need to have Ruby installed on the computer that your are using to build your site.

I have also seen 2 other CSS pre-processors, dtCSS and CSS Cacheer. Both are PHP based, and might be worth a look if Less isn’t what you’re after.