Initially I planned to invoke the reload function in less library using a timer, however after reading the docs I found this feature was already built into LessCSS. Simply add #!watch to the URL in the browser and LessCSS will poll the style sheet for updates.
On a wide screen monitor this means I can tweak the CSS and watch the changes appear, which in turn removes quite a bit of keyboard gymnastics while working on a design.
To take advantage of these features in your site simply add the following fragment to your html page.
Then move all your styles to css/styles.less within your mockup/site and reload the page. To enable auto reload of the styles.less file append #!watch to the URL and refresh the page.
One thing to note is you will need to serve the site using a web server of some sort otherwise you will get XHR issues, to do this on OSX I use a python one liner.
$ python -m SimpleHTTPServer
To illustrate this feature I have created a sample project up on github lesscss_watch_example_site.
comments powered by Disqus