Yes, it's possible nowadays to have sourcemaps when using Compass. Sourcemaps also enable us to save straight from Chrome Devtools.
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).
...should look something like this:
Note that you don't mention the soursemaps here at all.
Go to the projects scss folder:
$ cd /Users/bob/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.
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.
Open Devtools and goto Settings > Workspace and choose your project folder.
Now inspect the 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.
Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.