Rails 3.2, Sass, Compass, and Source Maps on Google Chrome

It has been quite a long time since many people started to talk about Source Maps, but I haven't tried using it yet. Today I decided to give it a shot and googled.

Many articles on the Internet say Chrome Canary supports Source Maps, but the Chrome 25 on my Mac mini supports it out of the box. You can turn on the feature by following instructions very clearly explained in this article. Make it sure that you have checked both 'Enable source maps' in General tab and 'Support for Sass' in Experiments tab (need to enable Developer Tools experiments in chrome://flags at the moment) in Developer tools.

If you are using command-line compass, you also need to put a line in your config/compass.rb file which is described in here. It was a little bit unclear for me that that one line should be put in config.rb, but soon found out that I have compass.rb in RAILS_ROOT/config that does the same.

Something similar to @media -sass-debug-info{filename{font-family:.... should be seen in your compiled .css files once everything has done correctly.

About Sanghyun Park

a.k.a Baxang. Software engineer lives in Sydney, Australia born in Seoul, South Korea.