Installing Less on the client side
To use Less in our code, we can download it from the Less site by browsing to http://lesscss.org/#download-options-browser-downloads and then clicking on the Download Less.js v.1.7.3 button.
Save the contents of the file, displayed in the browser window as less.min.js, in a subfolder called js, under the main lessjs project folder; you will end up with something like this screenshot (this shows the files you will create later in this chapter):
In a copy of the project.html file we created at the start of this chapter, add the code as highlighted:
<!DOCType html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet/less" type="text/css" href="css/project.less">
<script src="js/less.min.js"></script>
</head>
<body>
That's it—once this has been added, Less will compile the styles into valid CSS dynamically and render the results in the browser. The key point to note is that for Less to compile the styles correctly, the reference to the Less style sheet file must be included in your code first, before the reference to the Less library.
Tip
Can I get the source code for Less?
If you want to delve into the Less library and examine the code in more detail, then you might like to download a copy of the uncompressed version of the library, which is available at https://github.com/less/less.js/archive/master.zip.
Using a CDN
Although we could download a copy of the library, we don't need to when hosting it in a production environment. Less is available on a content delivery network hosted by CDNJS. You can instead link to this version in your code.
If you host an international site with a lot of network traffic, using a Content Delivery Network (CDN) hosted file will help ensure that the library is downloaded to a visitor's computer from a server that is geographically close to them. This helps in making the response quicker, as the browser will use a cached version on subsequent visits to the page, which saves on bandwidth. This is not recommended for development however!
Note
If you want to use a CDN link, then it can be found at http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js.