LESS CSS in Sublime Text 2

Posted in CSS, General by Marco Dias Lopes

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:

  1. Place a link to the LESS in the HTML:
    <link rel="stylesheet/less" type="text/css" href="styles.less">
  2. 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 nodejs npm

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

Now you need to install lessc:

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.

Share:

Post discussion

21 Responses to “LESS CSS in Sublime Text 2”

  • Sawant ShahNovember 28, 2012

    Got it! Was looking for the syntax highlighter for LESS. Gracias.

  • NicklasJanuary 16, 2013

    Thanks a bunch!

  • ChristiamJanuary 30, 2013

    Thanks

  • Damon SharpFebruary 6, 2013

    Missed the lessc step on Mac. Was banging my head. This helped a bunch. Thanks!

  • Walter StöberFebruary 10, 2013

    Many thx for your help

  • JoshuaMarch 1, 2013

    Is it possible to work on a less file on a server and have that build to the css?

    If so how? In windows, I get an error

    dotless1.3.0.0 has stopped working

    the less file saves fine though.

  • lesscssMarch 15, 2013

    Thanks for ur help…..keep well…

  • lesscssMarch 23, 2013

    good

  • JonaApril 16, 2013

    There’s a simpler form installing node and npm in OSX since node.js provide a installer http://nodejs.org/download/ doesn’t need mac ports

    • Marco Dias LopesApril 17, 2013

      That’s another valid approach, you can also use Homebrew which I currently find more suitable than MacPorts.

  • Claudio CastilloApril 29, 2013

    Gracias estaba buscando algo sintetizado como esto!..

  • AntonioMay 16, 2013

    Thanks for the tips! But I have a problem…
    I’m following your tips for Sublime Text 2 build 2217 on Mac, but I have this error if I try to build:

    [Finished in 0.0s with exit code 127]env: node: No such file or directory

    The symbolic link seems to not work, I have to change the path in config file of the plugin so it works.

  • RalfMay 16, 2013

    I also had to install the LESS-build package before it worked.

  • YonasMay 18, 2013

    Thank you so much. This was very helpful.

  • BryanJune 10, 2013

    Great article; thanks!

    The Macports package is actually named “nodejs”, not “nodes”:

    sudo port install nodejs …

  • JdmGarciaAugust 8, 2013

    Thank you so much. This was very helpful.

  • BradSeptember 15, 2013

    Thanks for the tut. Just setting up my first mac dev environment so this made it a little easier to get LESS working.

  • KratasOctober 8, 2013

    Simply great article. Thanks!

  • lissOctober 9, 2013

    and the 3 way, wich I prefer…
    compile LESS local (lessc file.less > file.css ) and upload this pure css output to server.
    I think client side is not recomended for speed matters.
    thks for instructions on installing less highlighting in sublimetext.
    folder for sublime text 3 packages on linux is ~/.config/sublime-text-3/Packages
    pd. sry for my english.

  • LanceNovember 21, 2013

    I’m looking for information on LESS type ahead/autocomplete with var and mixin awareness. Is there such a thing/setup? Working on complicated projects like Bootstrap could really benefit from full project awareness.

Leave a comment »