Milan Nankov – Blog

Using Less with Sublime 2 on Windows 2014/05/29

less-shot

Less is awesome. If you haven’t tried it you can check it out here. I have been using it for some time now and it does really help you write more maintainable and extendable CSS.

I am also using Sublime Text 2 for most of my projects. Although Sublime comes with built-in package for compiling Less on Windows called dotless it might not be sufficient for your needs. Dotless is out of date and does not support the latest Less features. For example, if you try to compile Bootstrap 3.1 with it you will get errors.

The solution that follows allows you to work with the latest Less features using Noje.js for Windows. It is really easy.

The high-level steps are as follows:

  1. Install Node.js for Windows
  2. Install Less package for Node.js
  3. Add Sublime build script for Less.js

 

Install Node.js for Windows

You can download and install Node.js from here. Make sure that you install the package manager for Node.js (included by default). It is also best to allow the installer to adjust the PATH variable (also done by default).

Install Less for Node.js

Once you have installed Node.js, its package manager (npm) should be available from the command line.

To install Less simply run the following command: npm install less –g

Do not forget the “-g” part at the end or you might have issues using the Less compiler without manually modifying the PATH variable.

Once the package is installed the “lessc” command should be available. This command invokes the Less compiler and we will be calling this command from Sublime.

Sublime build script for Less

The last remaining task is to copy the following Sublime build script to your packages. Alternatively you can download my Sublime repository from Github.

Open Sublime, go to Preferences and click on Browse Packages. Copy LESS.js.sublime-build to the packages folder and restart Sublime. Make sure that you have selected LESS.js as Build System from Tools –> Build System –> LESS.js.

DONE!. Open a .less file and build it with CTRL+B. If you would like to build a minified version simply invoke the Command Palette (CTRL+SHIFT+P), type “min” and choose “Build: Minify” after that.

Cheers.

 


Categories: Technology