Surrendering to Sass

I’ve finally gone all-out for Sass. The last thing that was holding me back was the speed with which I could make Sass file changes in RubyMine and see them in Firefox. I’d gotten so used to the ReCss bookmarklet being mapped to Ctrl-Z-Z using the ShortcutKey2URL Firefox addon that I couldn’t go from 0.1 seconds (using Javascript to reload my css files) to see my changes to 1 second (by doing a full-page refresh in the browser) to force Sass to recompile the css files.

Enter Erik Hansen, Javascript guru and all-around nice guy, for a 5 minute pair session where we added a synchronous ajax call to the ReCss bookmarklet to ‘/’ of our application to force Sass to recompile.

javascript:void(function(){var i,a,s;$.ajax({url: '/', async: false});a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {var h=s.href.replace(/(&|%5C?)forceReload=d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf())}}})();

Note the

$.ajax({url: '/', async: false})

at the beginning of the line – we’re hitting the root of our application with a synchronous ajax call (using jQuery because our application uses it and it is available) to force the application server to return a response which consequently forces Sass to recompile all the sass files we’ve changed. It’s pretty darn fast. One caveat – if your ‘/’ action is slow on your site because it loads a bunch of models and such (it’s not yet on our site), you should be able to create a Sass action in your home controller that doesn’t do much anything and point the ajax call at that instead – you might wanna enable that only in development mode, too.

And by the way, I’ve also fallen in love with the FireSass Firefox plugin. It’s a must-have for Sass development.