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.
<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>
www
folder; for WAMPServer, this is normally c:wampwww
.
http://127.0.0.1/less/Chapter%201/test%20Less%20include.html
If all is well, you should not see any changes yet.
@color-button
value, as follows:@color-button: #457668;
#submit {
color:#fff;
background:@color-button;
border:1px solid @color-button - #222;
padding:5px 12px;
}
http://127.0.0.1/less/Chapter%201/test%20Less%20include.html#!watch
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.