LESS has been a popular way to streamline your CSS-writing for a while now, but fitting it into your workflow isn’t always easy. Some designers use standalone applications like CodeKit or SimpLESS to compile their LESS files into browser-ready CSS, but I prefer a more integrated approach. Fortunately, Sublime Text—my personal favorite text editor has several available extensions to build LESS support in.
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.
- Open the package directory by typing “browse packages” into the command palette and selecting the LESS-build folder.
- Run
changeLESSBuildType.bat(Windows) orchangeLESSBuildType.sh(Mac/Linux) to set the build mode. Pick option number two (“directory rewrite”) when prompted. - 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.
