Reloading LESS like a Champ - ReLESS

Heads up! This post was written when Metric Marketing was known as Canada's Web Shop.
headshot

Being the curious bunch that we are here at the webshop we love to learn about new and exciting ways to make websites better. Recently we've added Twitter Bootstrap
to our tool belt which also means we added LESS to our tool belt. The change has had its share of headaches.

I'd like to share my solution to the issue of less.js having an annoying tendency to not update cached files. There are two parts to this problem: less.js caches files in window.localStorage and your browser obeys http expire headers.

My solution to this problem is two fold: disable Chrome's cache when working with less.js to prevent http headers getting in the way and use my bookmarklet when you want to reload your less. My bookarklet was inspired by ReCSS and I'm calling it ReLESS.

To make your own ReLESS bookmarklet make a bookmark and set the bookmark address to the below javascript. I put the bookmarklet in my bookmark bar so it's fast and easy reload changes after editing some less files.

javascript:void((function(){var host=window.location.host,protocol=window.location.protocol,keyPrefix=protocol+'//'+host;if(!window.localStorage||!less||less.env!=='development'){return}for(var key in window.localStorage){if(key.indexOf(keyPrefix)===0&&key.match(/\.(css|less)/)){delete window.localStorage[key]}}less.refresh(true)}()));

Note this bookmarklet has only been tested in Chrome. Enjoy!

Like what you read? Sign up for our Newsletter.