The 3.3+ version of Sass and the 1.0.0.alpha.16+ version of Compass each include support for source maps, a new feature that allows developers to view the source *.scss files when inspecting elements on a page.
The feature is an improvement to the
debug_info
option in Sass that added a special media query to *.css files that pointed to the source *.scss file. In current browser iterations this was only working in Firefox with Firebug and the FireSass add-on.
I decided to update my development workflow because FireSass was starting to really hobble Firefox after the recent browser updates.
Most of the information out there is a bit dated and it took a while to figure out the configuration that I needed to make it work, but I got there.
I wanted to update the versions of Sass and Compass in an existing project that is using Bundler to manage gem versions.
1. Edit Gemfile
To make sure I had the needed versions of Sass and Compass I edited the Gemfile for the project to include the following:
gem "sass", "~> 3.3?
gem "compass", ">= 1.0.0.alpha.16"
What these two lines mean are: make sure the sass gem is in the 3.3 version family (e.g. 3.3.0 to 3.3.n) and make sure compass is using at least version 1.0.0.alpha.16 (the first version to support source maps).
2. Edit (or delete) Gemfile.lock
Gemfile.lock contains the specific versions of what was used in the project the last timebundle install
Gemfile contains a more generic version dependency for a particular gem, the Gemfile.lock will not be modified in Step 3 and the project will continue to use the Gemfile.lock specified-version. In order to override Gemfile.lock a more specific gem version must be included in the Gemfile.
I deleted my existing Gemfile.lock file because it seemed to be the easiest way to move forward for me. (There were a number of different Sass versions specified as nested dependencies for other gems and it just got confusing.) You should probably make sure the changes that get made to it after the next step are not anything that will break the way CSS is compiled in your project.
3. Run bundle install
After editing or deleting Gemfile.lock and updating Gemfile I ran the command:bundle install
This will read the Gemfile and make sure that the versions needed of each gem are available on the system. In this case it downloaded new versions of Sass and Compass. It will also recreate the Gemfile.lock file and record the current versions of each gem. If you already have updated versions of the gems they will be used if they fit the parameters specified in the Gemfile.
4. Edit config.rb
In order to take advantage of the new source maps feature I had to find a way to have thecompass watch
command generate source maps upon changes to my *.scss files.
This is where it took a long time to pin down the correct settings for my config.rb file.
In the end the only setting needed was:
sourcemap = true
There are many posts on the web that suggest sass_options = {:debug_info => true}
(the only FireSass method) and sass_options = {:sourcemap => true}
(something that never seemed to do anything), but neither seems to have any effect.
With the sourcemap = true
setting in config.rb the compass watch
command will generate *.css.map files and *.css files that have comments at the bottom pointing to the location of the *.css.map files.