LESS CSS in Sublime Text 2

If you haven’t tested LESS you should. LESS is not a new language or a technical replacement for CSS, it’s a way of implementing CSS as it was a more structured language. The development process is fairly simple, you write your LESS code in a LESS file that will be compiled into a CSS file that your browser can read. Before starting you’ll need two things: a syntax highlighter and a compiler.

Syntax highlighting

First you should install the LESS-sublime package from Sublime Package Control. To the check if it is working properly, just create a new file with the less extension. And add some code like this:

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

The code should be correctly highlighted.

Compiling

Now you need something to compile the LESS file into a CSS file. There are two ways of compiling LESS: the client side and the server side.

Client side

The client side is pretty straight forward:

Place a link to the LESS in the HTML:

<link rel="stylesheet/less" type="text/css" href="styles.less">  

Add the script to the HTML file:

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>  

I’m not very fond of the client side compiling. It puts unnecessary load on the browser, leaving the page blank while the JavaScript processes the LESS file. And it’s a clear violation of the Progressive Enhancement rules, where the presentation (CSS) an behavior (JavaScript) layers should be separate.

Server side

For the server side compilation, there are two different approaches: using the Sublime Text’s LESS-build package on build or using a simple app like LESS.app.

The Less-build package is very simple for Windows users, just install it from the Package control in Sublime Text. This package, in Windows, uses dotless to compile the LESS files into CSS files and there are no changes required. You can skip to the “Build” part.

For Mac it’s not that simple, you’ll need the lessc package, that requires nodejs and npm.

If you have mac ports, install nodejs and npm:

sudo port install nodes npm

If you don’t have mac ports installed please check this tutorial to install nodejs and npm.

Now you need to install less:

sudo npm install --global less  

You need to check if the lessc file is where the LESS-build package wants it to be:

ls /usr/local/bin/lessc  

If the file does not exist you need to find it’s path. Unfortunately the LESS-build package doesn’t have a reliable way of configuring the path to the lessc file, you can place it inside the package config files, but it will be removed when you update the package. To solve this you can create a symlink to the lessc file, that should be located in the /opt/local/bin folder, like this:

ln -s /opt/local/bin/lessc /usr/local/bin/lessc  

You’ll need to set the build system in Sublime Text’s Tools menu, to LESS or LESS-min (minified compiled file). And now you will be able to compile the LESS file on “Build”.

If you are a Mac user and want a simpler way, you can download LESS.app. Then add the folder that holds the less files and every time you save the file a compiled CSS file will be generated or updated.

Place the compiled CSS file in the HTML as an usual CSS. And you’re done!

If you want to give LESS a try check this article: A Comprehensive Introduction to LESS from Sitepoint.

There are many advantages to use LESS such as variables, mixins, function and operations. The resultant code is cleaner, stricter, structured, minimizes the vendor prefixes nightmare and therefore more maintainable. However there are some drawbacks and one of them is huge, the existing debug tools are almost useless. When debugging with tools like Firebug, the lines refer to the compiled css file.