In this task, we're going to use Node.js, which we will hook into a normal text editor. For the purpose of this exercise, we'll use Notepad++, although a similar process will work for other text editors.
For this recipe you will need to avail yourself of a copy of Node.js, which is available at http://nodejs.org. Make sure you choose a version suitable for your platform; for Windows, this is node-v0.8.10-x86.msi at the time of writing. You will also need a copy of Notepad++, a free Windows-based application which you can download from http://notepad-plus-plus.org.
- Let's start by downloading and installing Notepad++ and
Node.js, accepting all defaults. - The Node installer will confirm when it has been completed; at this point, start a command prompt (or equivalent, if not using Windows), and type in
nodeto verify that Node has been correctly installed. You will see an error message if this is not the case; a reboot of your PC will usually resolve this fault. - Once
Node.jsis installed, go ahead and create a folder to store theNode.jsLESS module. For the purpose of this exercise I will assume that you have created one at the root ofC:drive, callednodejs. - Start a command prompt (note that you must do this as a user with admin rights), and change to the folder you've just created, and type in
npm install less, as shown in the following screenshot:
- Go ahead and open Notepad++ and create a
simple .LESSfile. You may need to change the ANSI type to avoid any syntax errors, it is usually set by default. - Open the Run... dialog box, by clicking on Run in the menu, then Run:
- Enter the following in the Run... dialog box, as shown:
"C: odejs ode_modules.binlessc.cmd" -x "$(FULL_CURRENT_PATH)" > "$(CURRENT_DIRECTORY)$(NAME_PART).css"
- Click on the Save button to save the command and enter a descriptive name, such as
LESS Compile. - Select the key combination of your choice. In this instance, I will assume you have used Alt + F12; close the dialog box.
- Open up your LESS file that we used in the Precompiling LESS client side section and press Ctrl + F12; if you have set it up correctly, you should see a
.cssfile appear in theC: odejsfolder you created earlier in this exercise.
It's important to note that Notepad++ is not a compiler in the same way that applications such as Visual Studio are; this means we have to tell it which compiler to use, as well as how to compile the file.
The command we've used in the previous exercise can be broken down into several sections as follows:
$(FULL_CURRENT_PATH): This gets the full path and filename of the file being worked on in Notepad++$(CURRENT_DIRECTORY): This gets the full path of the current directory; in this instance it will be of the.lessfile being worked on$(NAME_PART): This strips off the path and file extension, to leave the filename
In addition, we've included the –x switch for lessc.cmd; this tells the lessc file to output minified CSS. If you prefer, you can also use the YUI Compressor, by replacing the –x option with –yui-compress. Any of these options could easily be put into a .BAT, CMD, or .NET application to make it easier to use.
Now that we've seen how to compile your Less code into valid CSS, it should be time to move on and turn our attention to writing some Less code, right? But what if you've seen some CSS code and want to know how it would look if written using Less? Well, you can! I'll show you how in the next exercise.