Watching for changes in Watch mode

In this exercise, we're going to take a look at a simple, but useful feature called the Watch mode. 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. It is worth noting that the Watch mode can be used with the local filesystem, or with a web server—both will produce the same effect. For the purposes of the book, we will assume the use of the latter; in this case, we will use WampServer, which we covered back in of local web servers available within their distro.

We're going to test it by creating a simple form with the username and password fields.

Assuming that we have installed WAMP, or have web space available, start by opening up your text editor, then add the following code:

<!DOCType html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Adding watch support</title>
    <link rel="stylesheet/less" href="include.less">
    <script src="less.min.js"></script>
    <script type="text/javascript">
      less.env = "development";
      less.watch();
    </script>
  </head>
<body>
  <form action="demo_form.aspx">
    Name: <input type="text" class="input" />
    Password: <input type="password" class="input" />
    <input type="submit" id="submitfrm" value="This is a button" />
  </form>
</body>
</html>

Note

Notice how less.env = "development" has been added. This sets Less to work in the development mode—this is one of several options we can set in this mode. For more details, it is worth reading the documentation on Less' site at http://lesscss.org/usage/#using-less-in-the-browser.

Save it as watchr.html in the www folder, which should be c:\wamp\www by default. Next, in a separate file, add the following and save it as include.less:

@color-button: #556644;
#submitfrm {
    color: #fff;
    background: @color-button;
    border: 1px solid @color-button - #222;
    padding: 5px 12px;
}

Fire up your browser, then navigate to it by entering the appropriate URL into your browser; if all is well, you will see something like this:

Keep your browser window open. Now, let's make a change to our Less code; in the Less file, change the @color-button value to #334466:

@color-button: #334466;
#submitfrm {
    color: #fff;
    background: @color-button;
    border: 1px solid @color-button - #222;
    padding: 5px 12px;
}

Save the change to the Less file. Within a few moments, we will see the color of our button change from dark green to dark blue, as shown in the following screenshot:

When working with Less, compiled styles are stored in the localStorage area of the browser, and they remain there until the localStorage area is cleared. We can see this by pressing F12, then clicking on DOM, and scrolling down to the localStorage entry—assuming Firebug is installed:

To view any changes, we have to force a refresh from the server—using the watch facility forces the browser into the development mode, which prevents the browser from caching the generated CSS files.

It is worth noting that there are other methods you can use to watch for changes, such as using Grunt or Gulp. Two great examples include observr, which is available at https://github.com/pixelass/lessc-bash. We covered using Grunt to watch for changes in Chapter 2, Building a Less Development Toolkit.

上一章目录下一章