FireSass Bridges the Gap Between Sass and Firebug

This post has been translated into Belorussian by PC.

One of the most common usability issues people have with Sass is integration with existing tools. In particular, a lot of people (myself included) use Firebug and wish it played nicer with Sass.

In general, since Sass compiles to standard CSS, Firebug can deal with it just fine. One of the nicest features of Firebug when doing CSS work, though, is the ability to tell you where all the styles for an element are defined in your CSS.

When using Sass, this feature basically doesn’t work. It tells you where the style was defined in your CSS… which doesn’t really help you figure out where it was in the original Sass.

Introducing FireSass

On Friday, I became fed up with this and decided to fix it once and for all. The fruit of my effort is the FireSass extension for Firebug. Combined with a new debugging output option for Sass, FireSass is able to tell the user the Sass filename and line number for all the Sass styles.

Using It

First of all, install the FireSass extension itself, and make sure you’ve got FireBug installed as well. Until the extension gets more reviews and is vetted by the Mozilla editors, it’ll be listed as experimental. The code’s available on Github if you want to make sure it’s not malicious (it’s not).

Once the extension’s installed, you’ll need a recent development version of Sass. The easiest way to get this is to install the haml-edge gem by running gem install haml-edge. You can also install it as the haml gem by downloading it from GitHub and run rake install in the haml directory.

Next, you’ll need to configure Sass to compile in the necessary debugging information. This just involves setting the :debug_info option. If you’re using Sass with a Ruby web framework, you probably want to do

Sass::Plugin.options[:debug_info] = true

If you’re using Sass from the command line, just pass in the --debug-info flag.

Finally, delete all your existing CSS files to make sure they’ll be regenerated, and you’re good to go!

How It Works

I originally added the :line_numbers option to Sass in hopes of making a plugin like this that could read the line numbers and filenames and display them instead of Firebug’s normal line and filename information. Unfortunately, it turned out that in parsing the CSS file, all comment information was thrown away.

Next, I played around with passing in the information as custom properties. -sass-line-number and -sass-filename properties would have been a nice solution, but alas the browser discards all unknown properties just as thoroughly as it does the comments.

I gave this up for a year and a half, until this Friday night. Being upset at the lack of Firebug support, spurred on by two people in #haml on Freenode, I decided to take another look at the problem. And I came up with an awful, circuitous, but ultimately functional hack.

The trick is media declarations. If a media declaration for an unknown media type is used, all the rules for that declaration are ignored but they’re still available via Javascript. Thus, I packed all the debugging information for each rule into a media declaration like the following:

@media -sass-debug-info { ... }

Even after this, there’s still substantial complexity; if you’re interested, I suggest you read the Sass and FireSass code directly. The upshot, though, is that the data is there, and FireSass can read it.

Of course, adding an extra @media declaration for each rule creates a lot of stylesheet bloat. Thus :debug_info is automatically disabled when using the :compressed output style, which should always be turned on in production