FireSass with FireBug for FireFox.

Finally Nex3 released an “official update” in FireFox Addons. I’m not sure, but as far as I know the functionality still remains the same, and nothing actually had to be updated, except “FireFox compitability version” setting. There were “hacks” around (get the github version, change a line, be happy).

Crazy browser Versions

The Add-on was “outdated” for a while, just because FireFox is spitting new “major” versions every day now. I guess that is some bad influence of Chrome. In my opinion the “higher number” doesn’t really matter in the browser version, and if someone were to argue that it does, then I’d say that FireFox is still 8 versions behind chrome at the moment (what an outdated browser, meh?). Version updates (like from Version 1 to Version 2, or 3) should be with some visible significance! It doesn’t apply to Chrome, as Chrome does it in the background anyway. It doesn’t ask you if you want chrome 18 or chrome 29 or chorme 441, it just updates, and doesn’t break your extensions!

Safari is now what, 5.4 ? I wouldn’t think for a second that Safari is an “outdated” browser (even though the version number is smaller than IE6).

Anyway. I think Mozilla got it wrong there, and I’m just ranting here, because it broke the plugin at the Extension Directory, and I was lazy enough to not to compile one for myself.

What is FireSass ?

By now, I’d expect you know what is SASS, and you probably have guessed I like SASS.

Well, in short – FireSass does this:

See on the right ? It says “_type.scss (line 40)“.

Well that is because of the FireSass plugin. I can now see where the selectors “actually” came from, so this really helps when debugging with SASS. It doesn’t even mention that the only CSS file I’m using is called “style.css”, because CSS at this point is useless (for development) as I use SCSS exclusively. When looking something up, I’m interested in where did something come from in SCSS, and FireSass helps a ton with that!

Great, how do I get FireSass ?

Easy as pie.

First, you download & install the addon (you have to have FireBug first of course)
Then you go to your project you want to use FireSass with and set it to “emit debug info“.

If you’re using an app to do that, great – use that. If not, then you can look in the FireSass github page what steps you should take.

Don’t worry. It’s supersimple.

Basically what the GitHub pae says is that if you’re using SASS from Terminal, you add “–debug-info” to the watch statement.
If you’re using Compass and SASS, find the config.rb file, and add:

sass_options = {:debug_info => true}