Sass Rails Source Maps

NOTE: This gem is probably not working because it depends on sass version 3.3 and higher. Until sass-rails issue is resolved, you can try sass-rails-5.0.0.beta1 branch.

This gem allows you to see your Rails 4 .scss source files in Google Chrome inspector, which can be useful for debugging.

debug_info option available in stable sass gem is no longer working in Google Chrome, because Chrome now supports Source Map v3 only.

Installation

Add this to your application's Gemfile :

group :development do
  gem 'sass-rails-source-maps'
end

And then execute:

$ bundle update sass

to use sass gem with Source Maps v3 support, which is currently pre-release version.

After that, run:

$ rake assets:clobber

to make Rails regenerate assets. After assets regeneration, assets/source_maps containing sass source maps is created in public directory.

Usage

To see something like this you need to enable source maps in Google Chrome.

To enable source maps open Chrome inspector go to chrome://flags/#enable-devtools-experiments and Enable Developer Tools experiments. Then restart Google Chrome.

After restart, go to inspector Experiments settings and enable Sass stylesheet debugging.

And finally in General settings check Enable source maps.

Enabling source maps may vary in different Chrome versions. For more info please see Working with CSS Preprocessors; part Using Sass with CSS source maps.

Notes

• This gem is Rails 4 compatible only
• If you wan't to see coffeescript files in Google Chrome inspector you can use coffee-rails-source-maps gem.

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request