Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

Sass development at the speed of Javascript

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.

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *

Share This