Installing Less on the server side

As an alternative to compiling code on the fly, we can always use the command line to perform the same function—Less comes with a built-in command-line compiler that requires the JavaScript-based Node platform to operate.

Installing Less using Node

We took a look at how you can install Node in that you have installed it using the defaults, as outlined in that chapter. At this point, we now need to install the Less compiler, so bring up a command prompt, change to the location of the project folder we created earlier, and enter the following command:

npm install -g less

You will see it run through a download and install of Less at the command prompt:

Once the installation is complete, we can enter the following command to compile a Less file, which uses this syntax:

lessc srcfile [dstfile]

Less will compile the output to stdout; if we want to use a different one, then we can redirect the output:

lessc srcfile > dstfile

We're now ready to compile Less files at the command prompt—we will see this in action, later in this chapter.

Installing Less using Bower

Using Node with the command line is not the only option we have—we can also install Less using the cross-platform Bower package manager system, available at http://www.bower.io.

Based on Node, Bower is designed to help with the installation of packages for the web, such as jQuery, AngularJS, the Font Awesome icon library, and of course, Less. Let's take a look at how to install it for Windows, as this has an added dependency of Git for Windows, which must also be installed if we are to use this platform.

To get the full benefit from this demonstration, you will find it better to use a local web server, such as WAMP. For the purposes of this book, I will assume this has been installed with the default settings.

Start by visiting http://msysgit.github.io and downloading the latest installer, which is Git-1.8.5.2-preview20131230.exe at the time of writing. Double-click on the installer and click on Next to accept all defaults, until you get to this screen:

Change the selected option to Run Git from the Windows Command Prompt, then continue by clicking on Next to accept the defaults for the remaining settings. The Git installer will install and configure the client, and once completed, it will display the installation notes for reading if desired.

In a command prompt, enter the following command:

npm install -g bower

This will download and install the various packages that make up Bower—it will display a confirmation if the installation has been successful:

Once the Bower installation has been completed, change to the www folder within your web space and enter the following command to install the Less package for Bower:

bower install less

This will perform a similar process to download and install the Less package for Bower, as shown in the following screenshot:

At this point, Bower is now installed and available for use.

Using the Bower package

Now that Bower is installed, we can use it in our code—the major difference though is that it doesn't contain a version of lessc, so we are limited to only using it to compile dynamically in our code, and that developing code, which relies on using Node, is not supported.

With this in mind, we can still use it in a development capacity, to at least prove that our code works—for this, we only need to make one change to our code. If we open a copy of project.html, we can change the highlighted line to use the Bower version of Less, instead of the original version:

<link rel="stylesheet/less" href="include.less">
<script src="http://localhost/chapter3/bower_components/less/dist/le
ss-1.7.3.js"></script>
  <script type="text/javascript">
  </script>

We can, of course, take this much further—Bower operates very much in the same manner as Node, allowing us to produce .json packages, just as we did for Node in the previous chapter.

Note

If you want to learn more about producing packages for Bower, then Bob Yexley has a useful article at http://bob.yexley.net/creating-and-maintaining-your-own-bower-package/.

Let's now turn our attention to getting accustomed to the Less syntax. Before we do so, there is one important point we need to be aware of that concerns the dangers of using Less on the client side.