In this exercise we're going to take a look at a simple, but useful feature called watchr. This allows us to make changes to any less file while still in development, and for us to reload the page without having to force a complete reload of the page from the server.
For this exercise you will need to avail yourself of a copy of your code from the Installing LESS section, as well as a normal text editor of your choice.
For the second part of this exercise, if you want to use a local web server to preview your result, you will need to download and install an appropriate web server such as WAMPServer for Windows, available at http://www.wampserver.com/en. There will be similar products available for Mac (such as MAMPServer) and Linux users. It is best to try several, and remain with whichever you find easiest to use. For the purpose of this task, I will assume that you have downloaded and installed WAMPServer. If your settings are different, then please alter them accordingly.
- Let's begin by opening up a copy of the code from the Installing LESS section. Immediately below the call to the LESS library, insert the following:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js"> </script> <script type="text/javascript"> less.env = "development"; less.watch(); </script> </head>
- To test it, you need to fire up your local web server, and then save a copy of the HTML and LESS files from the first task into the server's
wwwfolder; for WAMPServer, this is normallyc:wampwww. - To preview the changes let's browse to your HTML file from within the server. You need to enter the appropriate URL into your browser, which will be something like this:
http://127.0.0.1/less/Chapter%201/test%20Less%20include.htmlIf all is well, you should not see any changes yet.
- The change comes when changing the LESS code. Go ahead and change the hex code for the
@color-buttonvalue, as follows:@color-button: #457668; #submit { color:#fff; background:@color-button; border:1px solid @color-button - #222; padding:5px 12px; } - Now go to your browser and alter the URL, so it looks something like this:
http://127.0.0.1/less/Chapter%201/test%20Less%20include.html#!watch - Press Enter to reload the page. You should see the color change from the original red to a dark green as shown in the following screenshot:
When working with LESS, you will find that compiled styles are stored in the localStorage area of the browser, and that they remain there until the localStorage area is cleared. This means you will have to force a refresh from the server in order to view any changes.
To get around this, you can force the browser into a development mode, which prevents the browser from caching the generated CSS files. The addition of !#watch at the end of the URL then acts as a trigger; it forces the browser to update the generated CSS style, without you having to force a refresh from the server.
It's time for us to now get stuck into writing some LESS code. Over the next few recipes, we're going to turn our focus to looking at the constituent elements of the Less library, beginning with using Less variables.