Sass + FireSass for Firebug == Theming bliss

The backstory

If you saw the presentation that Moa Nandorf and I gave on Sass & Compass at the fall 2011 Drupalcamp Stockholm this past weekend you may remember that we said that one of the major problems when working with Sass instead of plain ol' CSS is that you can't see the line number on which a certain property is set, in Firebug. It turns out that we were wrong. After the session I started thinking on how this problem could be solved and while talking to Fredrik Törnqvist we realized that since sass outputs on which line in the SCSS file every CSS code is generated from, Firebug should be able to parse that and display that instead of which line in the CSS it is from, which is meaningless when working with SASS.

Introducing fireSASS

We weren't the only ones coming to this conclusion. Nathan at nex3 has developed a Firebug plugin named fireSASS using a similar method which makes Firebug display the line number from the SCSS file instead! Not only that, it supports the Textmate, MacVim and Emacs URL Scheme so that you can right-click on the SCSS file link and open it in your editor directly, on that particular line!

Blablabla.. How do I enable it?

Nathan has written an excellent blog post on how it works and how to enable it. We use it together with compass and for all you compass users out there I have attached a compass config file(you will have to rename it to config.rb) file with the neccessary debug_info parameter enabled.

Bonus tip: Open in Sublime Text Editor

If you, like me, use the excellent Sublime text editor 2 and want to open your Sass files in that editor you can use this application to make textmate links open in Sublime instead. It even opens on the correct line!