LESS & automatic CSS cacheing

application.html.erb

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application", :media => "all", :id => "application_css"%>

application.js

console.log("refreshing styles...");
less.sheets.push(document.getElementById('application_css'));
less.refresh(true);
console.log("refreshed...");


less.autoRefresh = function(time)
{
    var sheets = [];
    for(var i = less.sheets.length; i--; )
        sheets.push(less.sheets[i].href);
    setInterval(
        function()
        {
            for(var i = sheets.length; i--; )
                less.sheets[i].href = sheets[i] + '?'+Math.random();
            console.log("refreshing styles...");
            less.refresh(1);
            console.log("refreshed...");
        },
        time || 1000
    );

    var fnImport = less.tree.Import;
    less.tree.Import = function(path, imports)
    {
        path.value += '?x='+Math.random();
        fnImport(path, imports);
    }
};
jQuery(document).ready(function($){
    less.autoRefresh(time = 600000);
});