Enable CSS Source Maps in Compass

I was talking with a co-worker this morning about CSS source maps. I've never been able to get Compass to create source maps for me. I tried again this morning and it's finally working. I can't find documentation for it anywhere, so I just wanted to share what I did. It's actually quite simple.

In case you don't know what a source map is, it's a file that allows the browser to show you where your compiled CSS originally came from. It maps the compiled CSS file to where the CSS rule was originally declared in the SASS file. Right now when you inspect an element you see the compiled CSS and it's location in the compiled file.

With a CSS source map you see where the code comes from. This means you no longer have to open the compiled CSS file to fine the line number of where the CSS came from. Here is the same element but with a source map being used.

I was able to get this running using Sass 3.3.12 (Maptastic Maple) and Compass 1.0.0.alpha.21. The tutorials I've read about enabling source maps in Compass mention that you need to add sass_options = {:sourcemap => true} to your config.rb file. This has never worked for me. Instead I added the following parameter, sourcemap = true, to my config.rb file. Compass now creates source maps as expected.

Here are the parameters from my config.rb file. You can see the option for source maps at the end of the list.

http_path = "/"
css_dir = "css"
sass_dir = "css/sass"
images_dir = "images"
javascripts_dir = "js"
sourcemap = true

Enabling Source Maps

Now that you have Compass generating source maps for your SASS files, you need to enable your browser to read the source maps. Each browser is different in how to enable source maps. Chrome and Firefox of course support source maps but only the latest version of the IE11 dev tools support source maps.

Chrome

For Chrome open the dev tools and click on the gear icon to open the tools settings. There's a section titled Sources. You'll see the option to "Enable CSS source maps". Just check that box and if a source map exists you'll start to see your scss files in your dev tools.

Firefox

In Firefox it's a bit different. When you open Firefox's native dev tools click on the gear icon to open the dev tools options. You'll find the source map option under the section titled Style Editor.

Internet Explorer

I'm not sure if IE11 supports CSS source maps. The latest version of IE11, which is the version in the Windows 8.1 update, supports Javascript source maps. You can enable source maps by following these directions

** Update **

The sourcemaps = true option was introduced in Compass v1.0.0.alpha.16. The current documentation doesn't mention the new option. You have to look at the beta version of the documentation, http://beta.compass-style.org/help/documentation/configuration-reference/