Sass development at the speed of Javascript

June 10, 2010 David Goudreau

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.

About the Author


More Content by David Goudreau
Gowalla looking for Android Developers (Austin, TX)
Gowalla looking for Android Developers (Austin, TX)

At Pivotal Labs, one of the services we provide our clients is helping them interview and hire. Pivotal Lab...

Ignoring Tracked Files in Git
Ignoring Tracked Files in Git

I occasionally run into a situation with Git where I have modified a file but have no intention of committi...

Enter curious. Exit smarter.

Register Now