I will assume that you already have Sublime Package Control installed, since it is pretty much a given for Sublime Text users.

Step 1: Adding Syntax Highlighting

I can’t imagine why anybody wouldn’t want their LESS files to have the proper syntax highlighting, so you probably want to install the LESS-sublime package, which you can find in Sublime Package Control under “LESS.”

Step 2: Installing LESSC

Now you need to install the LESS compiler, but first you need to grab a couple of dependencies.

First, download and install Node.js. NPM (Node Package Manager) should also be installed automatically, so now you should be ready to install LESSC. Simply run the following command:

npm install -g less

Step 3: Installing a LESS Build System

In order to have your LESS files compiled into CSS, you will want to install the LESS-build package. Once it’s properly set up, it adds a Build System for LESS, enabling you to process the files by pressing Control+B (Command+B for Mac users).

After you have installed the package, you need to do a little configuration.

1. Open the package directory by typing “browse packages” into the command palette and selecting the LESS-build folder.
2. Run changeLESSBuildType.bat (Windows) or changeLESSBuildType.sh (Mac/Linux) to set the build mode. Pick option number two (“directory rewrite”) when prompted.
3. In your project, select “LESS” from the Tools > Build System menu.

Step 4: Using Your New Setup

To demonstrate how the finished setup works, I put together a quick project in Sublime Text. My simple index.html references css/mysite.css as its stylesheet. This is the compiled output of many LESS files, which are found in the less directory.

The less/mysite.less file, which is compiled into css/mysite.css when I switch to it and press Command+B, looks like this:

//Load Twitter Bootstrap

@import "bootstrap/bootstrap.less";

//Additional styles would go here

It loads the LESS files that make up Twitter Bootstrap, which are easily tweak-able, since all of the styles are split into different files by sensible categories. Then any styles placed after the import line would override Bootstrap’s if they conflicted, given CSS’s precedence rules.

WP-LESS is a plugin that, using the lessphp library, brings LESS to WordPress. I have yet to try it for myself, but it certainly sounds intriguing.

The plugin watches for edits to your LESS source code, then recompiles and caches it as plain CSS, which is served up to your visitors.