Compiling the code and viewing results

Now that we've seen something of the syntax of Less, let's change tack and focus on how to compile our Less styles to produce valid CSS. There are several ways to achieve this, of which we touched on some back in Chapter 2, Building a Less Development Toolkit. For the moment, we're going to concentrate on using Crunch! to compile our code; we will switch to using the command line later in this section.

Using a standalone compiler

We will start with the variable example shown earlier in this chapter. Let's begin by starting up Crunch! and then clicking on the New LESS file button in the main code window. By default, it will create a new placeholder file called new.less; paste in the code from our example.

Press Ctrl + S to save the file, then save it in the lessjs project folder we created earlier, as variables.less:

Click on Crunch File to view the results of the compiled code—it will prompt you to assign a filename, so give it the default, which is the same name of the Less file, or in this instance, variables.css:

That was easy, huh? Any time we make a change to our Less file, all we need to do is save it, then click on Crunch File and the file is automatically updated. Let's test this by changing the color value assigned to the @my-color variable.

In the variable.less file, alter the value shown against @my-color as follows:

@my-color: #3f004b;

Resave the file, then click on Crunch File—the variable.css tab will flash momentarily to indicate that it has been updated. Click on it to view the changes:

As we can see, Crunch! has successfully updated the changes to our code—if there had been an error, it would flag an error message at the foot of our code, such as this one, to indicate a missing } at the end of our code:

Adding the missing } in this instance will fix the issue and allow Crunch! to recompile our code without any issue. Let's switch tack now and focus on performing the same operation, but this time using the command line instead.