Less.app for Windows (Sort of)

After recently purchasing my first Mac, I decided I wanted to sync my Mac and Windows workflow. The Less.app app for Mac is amazing for compiling your Less files the instant you save them. Unfortunately, there was no Less.app equivalent for Windows...until now!...sorta. (This may have already been done before, but I seriously couldn't find anything after an hour of Googling).

This Script is No Longer Needed!

I'm happy to announce that the web dev community has finally come together and produced GUI implementations of Less.app for Windows. The previous version of the article follows below. Now all that's left for you to do is get your ass off Windows and start working in a unix environment ;)

---

Check out SimpLess, and WinLess UPDATE: I've verified that this actually works for Ubuntu as well! Follow this guide to install node.js on Ubuntu

Guide Overview

• Purpose: Allow Windows users to compile less files into css upon file save
• Time Needed: 20 minutes
• Computer Skill Level Recommended: Intermediate

Less.app for Windows Instructions

So our "less.app" will simply be a command line job that monitors your less files. First, you'll need to snag the latest Node.js Windows binaries. (If you don't have 7-Zip, you'll need it to extract the files). Next, extract the files to a location preferably close to the root directory, making sure the path ends in "node". I'll be using E:\node Modify your Windows PATH to include the bin directory of your node download. In my case, I'll append E:\node\bin. Now download the most recent copy of Less.js from GitHub. (The Downloads button on the right allows you to download a zipped version).

Configuration

The rest of the tutorial and the code itself assumes you have the following file structure for your projects:

css/
less/
images/
file1.html
file2.html

Most importantly, your less directory and your css directory should be "sibling" directories. Download this simple project structure to follow along with the rest of the guide. (If you need to change the directory output, you can easily alter the code we will be using soon). Extract the downloaded Less.js Zip to the the less directory of the project you'll be using less in. The folder name will be in the form "cloudhead-less.js..." followed by some numbers. Rename the folder to "lessjs". At this point, your less folder contains the lessjs folder. Now download this JavaScript file named less.js. This is the script that compiles your less into css. Move it to your less folder. Your less folder should now look like so:

Compiling Less to CSS

Now we're finally ready to compile our Less to CSS! Open your less directory in the command prompt. (See a shortcut HERE) Now type the following in the command prompt:

node less.js

The module first compiles all .less files in the directory to css, and outputs the css file in the css directory. Next, as long as you leave the command prompt open, the module listens for any more changes to any of the .less files. Once it detects a change, it automatically compiles and updates the css file. To stop the module, use CTRL + c.

You're Done!

Now you can automatically compile and update your .less files on any of your projects, regardless of platform. If you aren't too concerned about updated versions of less, you can simply copy the lessjs file and the less.js javascript file into all your projects.

Feedback

Was there anything unclear in this guide? Did the tutorial rock? Let us know in the comments below! March 27, 2011