# 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](/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 source maps here at all.

Go to the projects scss folder:

```shell
$ cd /Users/bob/web/cm/scss
```

And run:

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

That creates 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.

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

![Screenshot](/images/Screenshot-2014-02-09-20.25.28.png-2014-02-09-20-26-08.png)

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

![Screenshot](/images/Screenshot-2014-02-09-20.24.04.png-2014-02-09-20-24-48.png)

Inspect an element and, BOOM! There it is.

![Screenshot](/images/Screenshot-2014-02-09-20.41.29.png-2014-02-09-20-44-12.png)

### Enable saving in Devtools

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

![Screenshot](/images/Screenshot-2014-02-09-20.32.05.png-2014-02-09-20-32-39.png)

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

![Screenshot](/images/Screenshot-2014-02-09-20.41.29.png-2014-02-09-20-48-42-02.png)

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](/images/Screenshot-2014-02-09-20.57.20.png-2014-02-09-20-59-19.png)

That’s all. Here's a nice
[video of Chris Epstein talking you through it](http://www.youtube.com/watch?v=-ZJeOJGazgE&list=PL37ZVnwpeshGi0vwS7HNUvsj8_vcNzQZk).