Update (4/22/2012) – I found a utility called WinLess that will automatically compile LESS files into CSS, with some other useful options. I have left the original article below, since it does give steps for setting up Node.JS/LESS and Notepad++ shortcuts.
Recently, I decided that I wanted to use LESS to easily generate CSS files, but I also wanted to compile these files before deploying on the web. To accomplish this, I used Node.JS (with the LESS module) and Notepad++. Currently, this Node.JS solution is preferred to the old Ruby compiler. To use this setup, follow the steps below.
- Download the Node.JS installer.
- Run the installer with the default options.
- Verify that the node and npm binaries are included in the PATH by opening a command prompt and typing node. You will be given an error message if this is not available. Reboot if you see this error message.
- Create a directory for Node.JS modules. (I used C:\Node.JS) This will be needed to setup your LESS module, and other modules if you choose to examine Node.JS further.
Installing the Node.JS LESS Module
Next, LESS will need to be installed. If you are not familiar with LESS, please review their site to see the benefits of using this system instead of hard-coding your CSS files. To install the LESS module, follow these steps:
- Open the command prompt.
- CD to your Node.JS module directory (created on step 3 above, C:\Node.JS in my case).
- Run this command:
npm install less
- Take note of the lessc cmd file and its location. In my case, it is stored here:
Create the Run Command Shortcut in Notepad++
Once the lessc.cmd file is installed, we can configure Notepad++ to compile our LESS files into CSS. Follow these steps to map Alt+F5 as a compile shortcut:
- Open Notepad++ and create a simple .less file. Make sure to set the encoding type to ANSI to avoid syntax error messages.
- Access the Run dialog box in Notepad++ by clicking Run->Run.
- Entering the following text into the Run dialog box (including the quotes):
"C:\Node.JS\node_modules\.bin\lessc.cmd" -x "$(FULL_CURRENT_PATH)" > "$(CURRENT_DIRECTORY)\$(NAME_PART).css"
- Be sure to replace
C:\Node.JS\node_modules\.bin\lessc.cmdwith the location of your lessc.cmd.
- The -x option tells lessc to output minified CSS.
It is possible to tweak this process in other ways if you do not wish to always save the CSS file in the same directory as the LESS file. For example, you could create your own CMD, BAT, or .NET app to run the less compiler with your own options. As always, feel free to comment with questions or additions to these steps.