dlo.me

Making Chrome Play Nicely with Compass & Sass

I'm a big fan of Compass, the CSS framework that uses Sass under the hood to make developing stylesheets not nearly as tedious as it might be otherwise. One thing that's always been a pain, however, is debugging SCSS while using the web inspector in Google Chrome.

Here's the problem. Compass reads content from a certain file, and converts it into CSS, which the browser then interprets to style the page you're viewing. When I (the frontend developer) reload the styles for a page and want to see where a rendering mistake might have occurred, I will only see the line number from the generated CSS file, and not the original SCSS file that I'm actually editing. Here's an example of what you might see below.

/images/source-maps/css-example.png

So, to find the source of a mistake, I have to open that CSS file, find that line number, go to the corresponding line in my SCSS file, and then repeat. Yuck!

Now, here's the solution: source maps.

Source maps are a rad new feature that has landed (at least with experimental status) in Webkit. Instead of viewing "main.css" above, you would see the source file and the source line number, e.g. "main.scss:352".

By now you probably want to know how to set this up, so here are the distilled instructions for Chrome 24.

Enabling Source Maps in Google Chrome

  1. Navigate to chrome://flags and search for "Enable Developer Tools experiments". Enable it and then restart Chrome.

    /images/source-maps/enable-experiments.png

  2. Once Chrome is back up and running, open the inspector and click on the settings icon on the lower right.

    /images/source-maps/open-settings.png

  3. Under the "General" tab, find "Sources" and check "Enable source maps".

    /images/source-maps/general-tab.png

  4. Under the "Experiments" tab, check "Support for SASS".

    /images/source-maps/experiments-tab.png

Congrats, you've come far. now Chrome is ready. The next thing you have to do is let Compass know to generate the requisite markup. In your Compass config file, add the following line:

sass_options = { :debug_info => true }

Once you've done this, start Compass (make sure to stop it first if you already have it running).

…and you're done. You should now be able to open the web inspector for a specific element and view which SCSS file and line number the styles were generated from, à la below:

/images/source-maps/scss-example.png

Enjoy!