LessCSS – a short introduction

What is LessCSS?

It’s a CSS extension which improves the CSS syntax with variables, inheritance, nested rules and other features.

This post is more than 10 years old, so please regard this as outdated.

Examples, please

A short example:

@linkcolor:		#9999C9;
@spacing_left:		60px;

.rounded(@radius: 3px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.navi {
	.rounded(5px);
	a {
		color: @linkcolor;
	}
}

div.navigation {
	padding-left: @spacing_left;
}

So you can define variables (like colors, distances etc.), which then can be used in the rest of the file – great to have all used colors in one place only. Furthermore there are user-defined functions, like .rounded here, a shortcut to add the three possible border-radius methods. You can even add parameters (in this case radius) with a default value. And nested classes (.navi a) can be written more naturally.

And there’s more

There are also operators and functions:

.darker {
	color: darken(@mycolor, 10%);
	background-color: lighten(@mybg, 15%);
	padding-right: @spacing_left * 2;
	padding-bottom: (@spacing_left + 5) * 2;
}

A complete list of all possible features can be found on the lesscss.org website.

How to use

So we’ve got a kind of CSS+ with one single disadvantage – not a single browser can understand LessCSS. Therefore the .less-files have to be “compiled” (=translated to ordinary CSS) before they’re sent to the Browser. There are different ways: You can automatically compile them on the server (usually with PHP), or you can use less.js, a javascript which handles the translation in the frontend – or you can use Less.app (Mac only).

Less.js is quite easy to use: Instead of including the css-file you simply put this in your (development) page header:

<link rel="stylesheet/less" type="text/css" href="site.less">
<script type="text/javascript" src="less-1.0.41.min.js"></script>

Less.app is a great OS X application, which monitors the folders where you put your Less-files and automatically creates the corresponding CSS-file, with error checking and minification if desired.

But…

I read some discussions on the web whether extending CSS is (by itself) a good idea or not. Most criticism is around these three points:

1. It’s an additional step in your development process/adds another layer of complexity

Yes, so does mootools/jquery and so does a CSS-reset. But would you recommed not using mootools/jquery, because it’s an additional layer? Usually not. The additional complexity is there only once – at the beginning, when you have to learn LessCSS. As soon as you use it in the second or third project this initial effort soon begins to fade.

2. Performance gets worse

If you include less.js and put everything online, this is true: The additional javascript and parsing takes a little bit more time. But less.js is IMHO not meant to be put online, it’s a development tool. So I recommend putting the resulting CSS file online and remove the less.js – much like you’d include a non compressed JS-library while debugging and the yc-compressed one later.

3. You can’t debug correctly anymore

When using Firebug or a similar tool, you work with the resulting CSS. So the line numbers are not correct anymore and if you change values, you change them in the resulting classes only. That might be a valid point for some people – but maybe someone writes a firebug extension one day..

IDE/Editor-Support

Since LessCSS is quite a new development I was surprised that for example PHPStorm natively supports LessCSS – not only does it syntax highlighting, but also error checking, auto complete and much more. There are also syntax-modes here, here and here for Coda and some plugins for TextMate (here or here).

More

More information about LessCSS can be found on the lesscss website or here or here.

And checkout these LessCSS Goodies (in Ruby).