Inspect CSS with file name and line numbers
SASS Inspector lets you inspect elements with line numbers and and file names. The extension is added as a sidebar pane in the elements panel.
Usage: Compile the scss files with the option of debug-info. The website including all CSS files needs to be hosted in a web server in order for it to work. Also undock your devtools window for a more easier experience with the extension.
Right now you can integrate it with TextMate through a URI Scheme links provided with all the CSS properties.
Please provide some feedback: Just make a ticket in https://github.com/tinganho/SASS-Inspector. It should work with >= Chrome v22
How-to integrate SASS Inspector with Sublime Text 2:
First you need to create a symlink for ST2 binary:
sudo ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~/bin/subl
You also need to have an application called SublHandler. It register a URI scheme handler for txmt:// links in MAC OSX.
Download the latest release through this link: https://github.com/downloads/asuth/subl-handler/SublHandler.zip
Unzip it, then launch it. Select SublHandler -> Preferences..., then set the path for the subl binary.
You have to have TextMate and ST2 installed in your MAC OSX computer in order for the integration to work. You have to reroute the calls from txmt:// links to ST2, because otherwise the links will only open in TextMate. You reroute the link calls through an application called RCDefaultApp. The link is http://www.rubicode.com/Software/RCDefaultApp/. Once installed you can access your RCDefaultApp through the built in system settings app in MAC OSX. Click on the "URLs" tab and click on the option for txmt links. Select SublHandler and you can test by compile some SASS code with the option of debug info and than just click on a blue link that is along with the CSS properties.
I want to thank Jon Cednert for making an awesome banner ad for this extension.