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.
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...