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