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).
Less.app for Windows

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
Less.app for Windows

Modify your Windows PATH to include the bin directory of your node download. In my case, I’ll append E:\node\bin.
Less.app for Windows

Now download the most recent copy of Less.js from GitHub. (The Downloads button on the right allows you to download a zipped version).
Less.app for Windows

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.
Less.app for Windows

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.
Less.app for Windows

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:
Less.app for Windows

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)
Less.app for Windows

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.
Less.app for Windows

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!


Related Posts:


About the Author:

Joseph is the lead developer of Vert Studios, a web design company located in Tyler, Tx. Follow him on Twitter! @Joe_Query.

  1. Jeremy Carlson
    Permalink

    Huh…not as bad as I thought it would be. If I used LESS, I’d use that. I can’ believe this isn’t out there somewhere.

    • Joseph McCullough
      Permalink

      You and me both, man. I’m not a huge fan of reinventing the wheel…I seriously could not find anything like this that would “listen” for file changes. So did the installation work well for you?

      • George
        Permalink

        Totally let me know if you find a more polished version… Not to say I’m not grateful for what you’ve done, it’s pretty brilliant; but I’ve been trying to get away from OSX and the lack of a decent “Less.app” for windows has been preventing me moving back to Windows.

        • Joseph
          Permalink

          Thanks for commenting, George. I do like my Mac, but I can’t stay away from my monster Windows machine ;) I agree this is a quick and dirty way of going about less compilation, but it suits my needs, and hopefully others’ needs as well. Unfortunately, it looks like this is really the most viable option that incorporates less.js as opposed to ruby less. Maybe someone can extend the script and make it more robust.

          • George
            Permalink

            I haven’t done a lot with configuring less.js specifically, but do you know what or where lessjs determines the layout/formatting of the compiled CSS file? I’m curious only because Bryan Jones’s LESS.app for OSX compiles the CSS files a little more readable. (doesn’t compress properties for a class in one line, etc…)

            The only reason I ask is because I’d like to duplicate that same formatting, because not everyone in my office uses LESS yet.

          • Joseph
            Permalink

            Sure thing. Line 64: Change compress: true to compress: false.

            And you should totally get your office using LESS. It’ll take a whole 3 minutes ;)

          • George
            Permalink

            You sir, are a gentleman and a scholar.

    • Filip Van Tendeloo
      Permalink

      Hi,

      I just released an Adobe Air version of the Less.app. This has been tested on Windows. But please keep in mind it is still in beta ;)

      http://www.proving-ground.be/less/

  2. Daniel Witt
    Permalink

    Hi Joseph,

    great idea. I use your installation instructions, to integrate it into the product PhpStorm and IntelliJ. It works perfectly – heavenly!

    Until today I’ve used Ruby for it with a batch script, but as of today, in my opinion this is the best solution!

  3. Bernard
    Permalink

    This works out really well!! thanks a bunch!

    • Joseph
      Permalink

      No problem, glad it worked! I’m sorry there’s no pretty GUI wrapper for it, but hey, it works!

  4. Göran
    Permalink

    I found this: https://github.com/DominikGuzei/flawless.css

    and have been using it for a couple of hours..

    Don’t know how it is compared to yours but it works great!

    • Göran
      Permalink

      And it’s realy great beacuse you run it in your browser (in a jquery interface)and the content refreshes when you change the code. Plus boilerplate is integrated also so you have cross-browser and mobile device integration..

      • Joseph
        Permalink

        Sounds pretty cool! I’ll gladly promote a better solution when I find one. As is, this less hack is quite nasty, but it gets the job done.

  5. Ben
    Permalink

    Thanks a lot for this. It works flawlessly for the most part. However.. less supports adding proprietary attributes like ‘filter’ for IE by placing it in quotes and preceding it with a ‘~’. You can see an example of this on the less website.

    When I do this with your solution, errors are being thrown in the dos window:

    “ERROR: Syntax Error on line 576″

    Any way around this?

    • Joseph
      Permalink

      Hey Ben,
      I’ve been busy, but I’ll definitely look into that. Freaking IE messing everything up ;)

      • MarSOnEarth
        Permalink

        On my box (Win2k3) following Joseph’s instructions, all the tests in the current less.js code (lessjs/test/) run successfully save for the tests in javascript.less file. One of those “OK” tests, file strings.less, uses a DX.* filter.

        /MarSOnEarth

  6. Alex Galinier
    Permalink

    I’m looking for that since a long time. Thanks a lot ! I could’nt use Less at work cause some developpers use windows, and direct compilation by adding the js in the html wasn’t usable for us. But with this solution everything will be fine.

  7. Steve
    Permalink

    Thank you so much! Moved to a Windows machine at work and was looking for exactly this.

  8. summers173
    Permalink

    Thanks for the post, i find it very usefull. I was wondering is there a way that u can compress all the files in a project if u dont follow the folder structure above, i mean a way that the script find every .less file in the folder project and maybe create the .css file in a css folder at the same level that the .less file, i dont care about the interface in less.app wich is nice, but i find very cool that it can find all the less files and compile them.

    I hope u can tell me something, forgive my english, and thaks for your time, keep the great job

    • Joseph
      Permalink

      It actually wouldn’t be very hard to code up what you’re asking for. I’ll try to find some time in the next week to put that together for you.

  9. Matt
    Permalink

    This is awesome! It’s much more solid than http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe and your solution supports all the functions of LESS. Great work!

    The only thing that would make it better would be a GUI so that you can change the output directory and whether or not to minify without needing to modify less.js.

  10. Skydda
    Permalink

    Hey!

    Works fine on windows!
    Although could you explain how it stays and listens for file changes???

    I just seem not to be able to spot it..

    • Joseph
      Permalink

      The command line window is where the listening happens. Change and save a less file in the same directory as less.js (example: style.less) and the command line will say “style.css compiled” or something like that.

      • Skydda
        Permalink

        I know that it does it.

        And after looking around, its the fs.watchFile(fullPath, …)

        I’m not that average joe who looks how to get things working :S, I also modify and do things to the code :P

        But anyways nice work, works very well

        • Joseph
          Permalink

          I totally misunderstood you! I thought you meant in the command line, not the code. Sorry :(

  11. Brandon
    Permalink

    Thank you so much for this! Just one problem that I’d greatly appreciate some help with. When I run the node less.js, it accepts the .less file, parses it and all, but then outputs a parsed file with the extension .less in the css folder instead of .css —–super frustrating! :P I’ve been trying to find all types of workarounds, any clue why this is happening?

  12. MarSOnEarth
    Permalink

    Joseph,

    Thanks for the detailed instructions on setting up node.js and less.js (I was struggling with that; getting all kinds of strange exeptions, until I followed your instructions), and most of all for the script. It all enabled me to finally(!) getting it all going.

    One thing that bothered me about the assumptions you’ve made in your script was that they required copying/duplicating the whole less/ folder (your script + lessjs) into every project, so I’ve taken the liberty to modify them and your script (simplifying it at the same time).

    In my setup I’ve installed both, node.js and less.js in my $TOOLS/ folder as node/ and lessjs/ subfolders, and your script (which I renamed watch.js) in $TOOLS/. The modified watch.js assumes that it is invoked from the top of a project folder, which folder contains the less/ and css/ folders

    This way there is only one installation of all the required scripts, and all and any project can use them without duplicating the less.js code.

    Thanks again,
    /MarSOnEarth

    Here’s the modified watch.js
    — watch.js —

    //Author: Joseph McCullough et al
//http://www.vertstudios.com/blog/less-app-windows-sorta/
//Let's the poor Windows users have some LESS fun ;) 

var path = require('path'),
    fs = require('fs'),
    sys = require('sys');

//http://bit.ly/dKlPqQ (stack overflow) for package.json use
require.paths.unshift('./node_modules')

//snag the less module
var less = require('./lessjs');

//Let the user know less is listening for file changes.
sys.puts("\n" + stylize("Watcher - looking for .less files...", 'underline') + "\n");

//For each file in the current directory...
var lesspath = "./less/";
var csspath = "./css/"

fs.readdirSync(lesspath).forEach(function (file) {
	//If it isn't a less file, break out.
		if (! /\.less/.test(file)) { return }

	var filepath = lesspath + file;

	//Convert less to CSS. Write to file if successful.
	toCSS(filepath, function (err, less) {
			writeCSS(file,err,less);
	});
});

//For each file in the current directory...
fs.readdirSync(lesspath).forEach(function (file) {
	//If it isn't a less file, break out.
    if (! /\.less/.test(file)) { return }

	var filepath = lesspath + file;

	//Add a file watch
	fs.watchFile(filepath, { persistent: true, interval: 200}, function(curr,prev)
	{
		//Convert less to CSS. Write to file if successful.
		toCSS(filepath, function (err, less) {
				writeCSS(file, err,less);
			});
	});
});

function toCSS(path, callback) {
    var tree, css;
    fs.readFile(path, 'utf-8', function (e, str) {
        if (e) { return callback(e) }

        new(less.Parser)({
            paths: [require('path').dirname(path)],
            optimization: 0
        }).parse(str, function (err, tree) {
            if (err) {
                callback(err);
            } else {
                try {
                    css = tree.toCSS({compress: true});
                    callback(null, css);
                } catch (e) {
                    callback(e);
                }
            }
        });
    });
}

function writeCSS(file,err,less){
	if (err) {sys.puts(stylize("ERROR: " + (err && err.message), 'red'));}
	else
	{
		var cssFile = csspath + file.replace(/less/,"css");
		fs.writeFile(cssFile, less, function(err)
		{
				if (err){
					sys.puts(err);
				} else {
					sys.puts(cssFile + " successfully updated.");
				}
		});
	}
}

// Stylize a string
function stylize(str, style) {
    var styles = {
        'bold'      : [1,  22],
        'inverse'   : [7,  27],
        'underline' : [4,  24],
        'yellow'    : [33, 39],
        'green'     : [32, 39],
        'red'       : [31, 39]
    };
    return '33[' + styles[style][0] + 'm' + str +
           '33[' + styles[style][1] + 'm';
}

    — /watch.js —

    • Joseph
      Permalink

      MarSOnEarth,

      Thank you SO much for your contribution. I’ve known the script was in need of a facelift (other commenters here agree with you about that), but I haven’t had time to put improve it. I learned the bare minimum amount of node.js to get it working, and it suited my needs at the time. Once again, thanks a ton, I’ll be testing this out soon.

      • MarSOnEarth
        Permalink

        You’ve done the hard work, Joseph.

        In further testing (3 systems) it turned out that the current Cygwin implementation of node.js has an uncanny ability to mangle paths, and currently the only reliable way to invoke node is with a relative path, so no ‘node $TOOLS/watch.js’. A small wrinkle in my setup(s) where the relative path of $PROJECTS/* is constant vs. $TOOLS/ folder, so one alias can serve all projects, but it maybe a problem in other setups (no way that I could find of invoking the script with an absolute, or parametrized path name). This has nothing to do with your script, but it’s something to watch for (and for some, your original script may work better/more reliably). Also, in the current state, node.js seems blind to file changes (or lack of thereof) on a mapped network drive, so the file watch function is not working right; the CSS files are being constantly rewritten (bummer, that’s how my main dev box is set up). With local drives things work well. So, few small complications, but for me things are working well enough.

        Thanks again,
        /MarSOnEarth

        • Mikael
          Permalink

          Hi, thanks for the improved script. Have the path’s been solved? It would really speed up development to have it all centralized :-)

        • Mikael
          Permalink

          Also, your using cygwin to create the $TOOLS path?!..
          Sorry, im iv’e never used cygwin or node.js before but want to learn.

          • MarSOnEarth
            Permalink

            As to your first question, as things are the script (actually it’s a problem with the cygwin node) does not work well with mapped drives/folders.

            There’s a bit of a good/bad news as Joyent is working on Win native implementation of node. The bad part is that Cygwin support will be dropped.

            As to your second question, TOOLS (and PROJECTS, and ASSETS, and, and…) are just env variables. You can define them in Windows, or set them up in your .bashrc.

  13. Anderson Juhasc
    Permalink

    Cara, obrigado pela sua ajuda!
    Um tempo atras eu estava procurando muito isso!

    Thx!

  14. Chris
    Permalink

    A note on a simple bug in your less.js file:

    At line 78 there is a string replace of /less/ to “css”. If I name my file something like “lessstyle.less” it ends up being renamed to “cssstyle.less”. Basically, only the first “less” text is being replaced with “css” in the filename.

    Of course, the simple solution on my end is to just name my .less file “style.less” to it becomes “style.css”!

  15. Petr
    Permalink

    Hi there,
    thanks a lot for this. Tried ruby (only for less precompiliing) but node.js is the way! The ruby gem for windows doesn’t support the & selector, which makes it useless.
    Editted the script a bit to suit my dir structure and it works like a charm.

    Great work!

  16. Alex
    Permalink

    Hey dude, this is awesome thanks heaps! I’m trying to modify the less.js, so that if a file changes rather then compiling that file it compiles a master file which imports all the less files i have in that project. For example i have a file called bootsrap.less which imports all my less files, ideally when a file changes i want the script just to compile that file bootstrap file again rather then the file i edited. would it just be a matter of hardcoding the path variable in less.js? Again thanks for the post been very helpful!

  17. Tom
    Permalink

    Perfect, and extremely helpful. So fast that I can simply include the compressed version locally and not see the difference.

    For a moment there my heart jumped when I thought that meant I had “fixed” FireBug… but of course, alas no, it’s still just monitoring the compiled (and therefore not-editable*) new style.css file :’(

    Any new advances on sorting FireBug? :)

    *you know what I mean

  18. Petr
    Permalink

    Is there a way to precompile the twitter bootstrap (http://is.gd/ylDiWJ) with that?

    It’s probably some kind of @import issue as the bootstrap files suck data from their siblings.

    http://grab.by/aUAs

    Thanks in advance.

  19. Mark Lagendijk
    Permalink

    Hey,
    I wrote a program called WinLess: http://winless.org. WinLess is a compiler (with GUI) for LESS. WinLess can watch your LESS files, and automatically compile them when they have changed.
    WinLess comes with an installer and is really easy to use. It is very similar to the OSx app ‘LESS.app’.

    If you are using Visual Studio for your projects you should also check out the BuildEventScript of winless.org.

    • Joseph
      Permalink

      Very cool! Some points of feedback:

      The installer you used wouldn’t let me specify where I wanted it installed. I use a SSD for C, my OS boot up drive, and it’s running really low. Your installer forced its way onto my C drive.

      You should be able to shift-click to uncheck multiple check boxes.

      Is it possible to use the more expanded file navigation API for the “Add folder” function? It’d be nice to have my shortcuts to refer to instead of having to click through every drive.

      • Mark Lagendijk
        Permalink

        Glad you like it.

        I used a tool created ‘warsetup’ to create the installer. It is nice tool because it is really simple to create a simple installer with it. I don’t think it is possible to let it choose the folder.
        Doesn’t matter much either: WinLess is less than a mb in size.

        The shift + click thing would indeed be nice, but I don’t think it would be that easy to implement.

        I will have look to see if it is possible to change the folder dialog. It might just be a setting of the .NET control, but I have no idea.

        Could you maybe add a link to winless.org in your article?

  20. atomi
    Permalink

    Please everyone date your work. This is grade school stuff. I can’t find a single date for any post on this blog. Seriously?

    • Joseph
      Permalink

      Technical articles with dates are more likely to be viewed as outdated as time goes on even if the information is just as relevant.

      • atomi
        Permalink

        This article is already outdated. Npm on Windows using node.exe is already functional. Using cygwin is not advisable as per the node.js documentation. Perhaps some folks would rather use outdated third party binaries, but I sure do not.

        I really can’t believe that you’re trying to argue that providing less information is in any way a benefit in technical writing. Always date your work.

        • Joseph
          Permalink

          I appreciate the information about npm. Next time you can just say that first. I’m sorry the lack of dates inconvenience you. I’ll consider putting them up, but know that being so aggressive with your ideas rarely leads to change.

  21. Daniel
    Permalink

    There’s actually a LESS parser for Windows now, it watches a folder and compiles the .less file into a .css file upon save.

    http://proving-grounds.be/less

    This isn’t my website, just found it over the weekend, and it’s by far the easiest method on Windows.

  22. Sukar
    Permalink

    I still prefer your command line method. However, can you update the less.js file because I am using a new version of node v0.6.11? Tried and tested SimpLess, and WinLess but I do not feel connected with using them. Not familiar of using node scripts and parsing so when you update the less.js file that would be really awesome! Thanks for the good work.Cheers!

Add to the conversation: