How to enable sourcemaps in Sass and Compass

Yes, it's possible nowadays to have sourcemaps when using Compass. Sourcemaps also enable us to save straight from Chrome Devtools.

Set up Sass and Compass

You’ll need:

  • Sass 3.3.0.rc.3 (or the stable 3.3 when it’s out)
  • and Compass 1.0.0.alpha.18 (or the stable 1.0 when it’s out)
See here my related post on how to do that: How to install Sass and Compass pre releases on an RVM.

Alrite, now you have Sass and Compass installed and you’re using maybe Grunt to compile and build your projects (I’ll write something about that later).

Compass config file…

…should look something like this:

http_path = "/"
css_dir = "/"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

Note that you don’t mention the soursemaps here at all.

Go to the projects scss folder:

$ cd /Users/hilja/web/cm/scss

And run:

$ --compass --sourcemap --watch style.scss:../style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.

That creates you a file, it’s total gobbledygook, but Chrome understands it.

Set up Chrome

Have the latest Chrome installed, 32 at time of writing this.

Go to chrome://flags/#enable-devtools-experiments and enable the Developer Tools experiments, boot Chrome.

Screenshot 2014-02-09 20.25.28.png 2014-02-09 20-26-08

Goto devtools, open the settings, and tick the “Enable CSS source maps” and “Auto-reload generated CSS”.

Screenshot 2014-02-09 20.24.04.png 2014-02-09 20-24-48

Inspect an element and, BOOM! There it is.

Screenshot 2014-02-09 20.41.29.png 2014-02-09 20-44-12

Enable saving in Devtools

Open Devtools and goto Settings > Workspace and choose your project folder.

Screenshot 2014-02-09 20.32.05.png 2014-02-09 20-32-39

Now inspect and element and click the .scss file name on the right.

Screenshot 2014-02-09 20.41.29.png 2014-02-09 20-48-42-02

It shows the file in the Sources tab. Before you can save you need to enable the Network Mapping, right click any SCSS file.

Screenshot 2014-02-09 20.57.20.png 2014-02-09 20-59-19

Thats all. Here’s a nice video of Chris Epstein talking you through it.

Club-Mate, the beverage →