You are here

No more FireSASS?

DOMONKOS Gyula's picture

FireSASS has been a great help for years for those front-end developers who used the SASS CSS preprocessor, but if you decide to reinstall your operating system or you decide to try this tool now for the first time then you will be surprised to receive a message https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ webpage:
"This add-on has been removed by its author."

The same happened to me yesterday so I decided to share my experience in the hope that you can save some time if you find this blogpost.

So I started to search for solutions and I quickly found an alternative extension: Firecompass. I studied descriptions about modifying config.rb (for example this one), and I managed to make it work (you can find the necessary code lines below), but Mike Stewart's comment made me think:
"The new practice would be to remove your browser plugins and use --sourcemap in both sass 3.3+ and compass 1.0.1+ -- all major browsers currently have builtin developer tools support for sourcemap files (*.map)!"

Sourcemap enables you to debug .scss files not only in Firefox but e.g. in Google Chrome too.
These two links give you detailed descriptions but I describe here in a nutshell how to use sourcemap in Firefox and in Chrome.

In Firefox right-click to the item you want to debug and click on Inspect element (so not on the Inspect with Firebug line but to Firefox's own developer tool). Find the part at CSS rules in which you are interested in and choose Show original sources after right-click. After a few seconds developer tool window will refresh and it will show the .scss filename.

In Chrome open chrome://flags page and enable Enable Developer Tools experiments. Then right-click to the item you want to debug. Open settings (gear wheel on the top right corner) and tick Enable CSS Source maps checkbox. Optionally you can tick Auto-reload generated CSS checkbox too. Now Chrome shows .scss filenames too.

You need at least sass 3.3 and compass 1.0.1 to use sourcemap so you need to modify your config.rb file.

If you develop in team you might run into another problem as every team member have to update sass and compass. I don't want to get away from the subject but it's worth to mention Bundler, which helps you to synchronize SASS and compass versions on every developers' computer.

Let's see FireSASS, Firecompass, and sourcemap related lines from config.rb:

# Change this to :production when ready to deploy the CSS to the live server.
environment = :development
#environment = :production
 
# Enable sourcemaps in development environment.
sourcemap = (environment == :development) ? true : false
 
# Alternative development debugging methods
#
# If in development (above), we can enable line_comments for FireCompass plugin.
# Requires Firebug plugin and FireCompass plugin
firecompass = false
#firecompass = true
 
# If in development (above), we can enable debug_info for the FireSass plugin.
# Requires Firebug plugin and Firesass plugin
#firesass = false
firesass = true
 
# Pass options to sass. For development, we turn on the FireCompass-compatible
# line_comments if the firecompass config variable above is true.
sass_options = (environment == :development && firecompass == true) ? {:line_comments => true} : {}
 
# Pass options to sass. For development, we turn on the FireSass-compatible
# debug_info if the firesass config variable above is true.
sass_options = (environment == :development && firesass == true) ? {:debug_info => true} : {}

After modifying config.rb use compass clean (or bundle exec compass clean) command to delete old .css files, then use compass watch (or bundle exec compass watch) command to continue editing .scss files and now you can debug them in your browser.
Another advantage of using sourcemap beside the ones above that you can save your modifications to the original .scss file while inspecting elements.

If you insist on using the well known FireSASS extension then you can download from here, and can install it manually following the guide.

Technology: 

Comments

Thank you very much. Sourcemap help me save a lot of time !!