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
- 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)
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:
Note that you don’t mention the soursemaps here at all.
Go to the projects scss folder:
$ cd /Users/hilja/web/cm/scss
$ --compass --sourcemap --watch style.scss:../style.css >>> Sass is watching for changes. Press Ctrl-C to stop.
That creates you a
style.css.map file, it’s total gobbledygook, but Chrome understands it.
Set up Chrome
Have the latest Chrome installed, 32 at time of writing this.
chrome://flags/#enable-devtools-experiments and enable the Developer Tools experiments, boot Chrome.
Goto devtools, open the settings, and tick the “Enable CSS source maps” and “Auto-reload generated CSS”.
Inspect an element and, BOOM! There it is.
Enable saving in Devtools
Open Devtools and goto Settings > Workspace and choose your project folder.
Now inspect and element and click the
.scss file name on the right.
It shows the file in the Sources tab. Before you can save you need to enable the Network Mapping, right click any SCSS file.
Thats all. Here’s a nice video of Chris Epstein talking you through it.