FireSASS equivalent or similar for Chrome Dev Tools Chrome Office Hours, live from London

I'm really getting into SASS and use it on a regular basis and find a combination of LiveReload and FireSASS is helping me out in my workflow. LiveReload and FireSASS basically allow you to edit a SASS file then LiveReload will compile the SASS file to CSS as well as extra 'stuff', this 'stuff' allows you to debug in Firebug and still see the code line number from the original SASS file, as in the compiled CSS it's likely to be different. If you're not familiar with SASS or LiveReload I'd recommend going checking them out.

Recently the great folks over at Google started 'Chrome Office Hours'. They allow people to write questions to ask the team and others to thumbs or down the questions being asked to make sure they are answering the most relevant questions the world wants to know. They then broadcast this live and stick the video up on YouTube.

I was lucky enough to get my question answered by Paul Irish. Awesome. The answer went a bit like this:

"So we've been looking at this and really want to have some good powerful stuff. There's a patch that's been brewing and hasn't landed yet where you can see SASS files inside the soruces panel in the Chrome Dev Tools, and so that's kinda the first step, we'll see where it goes from there, we're investigating and writing code right now.

It's not using source maps just yet, the cool thing is that the original implementation of source maps was refactored to allow for more flexibility when it came to CSS source maps, what's implemented right now isn't taking advantage of that, there's plumbing to enable that.

That patch should actually land today or tomorrow so if you're on Canary you'll see the beginnings of that.

The other thing I wanted to mention is if you Google for 'Web Inspector Commits RSS' you can get an RSS feed of all the commits to webkit that are just the webkit inspector which is Chrome Dev Tools and you can see everything that lands including new features and bug fixes and stay very close to what's coming down the pipe."

I'm off to a festival this weekend, but I'll be sure to check it out when I'm back :)

== Edit: 8th Aug 2012 ==

Uploaded to the latest version of Canary, but can't find anywhere to activate it looking at the sass file. If anyone knows how to get it working, please can you let me know.

On a separate note, the settings text looks a little odd:

== Edit: 12th Aug 2012 ==

@paul_irish got back to me saying:

"@simonowendesign it's not very far along so we're not saying much until we land some more patches. @simonowendesign you gotta output line numbers or debug-info from sass compiler. Then devtools will map your css to sass when you click"

Looking forward to see the progress on this, would be super awesome if teamed with Auto Save and Compass. So you could write things like variables, mixins etc. straight from dev tools, that were then sent directly to your SASS file.

== Edit: 1st Nov 2012 ==

These guys don't mess about! It's now up and running in Chrome Canary, you'll need to activate it via

1

chrome://flags > Enable Developer Tools > relaunch > settings cog > experiments tab > support for SASS > refresh dev tools and refresh page > voila!

For a full run down and more check out this video with Paul Irish and Addy Osmani: