View Sass line numbers in Chrome Dev Tools

Sass is a great tool for organising and creating CSS files, but when compiling down to a single file it can become difficult to find out which file you need to edit.

Sass source maps

To view the correct file and linenumber in devtools, you need to enable source maps in Chrome and in Sass. This requires Sass 3.3+, so check you have the correct version:

$ sass -v               # shows version of sass currently installed
$ gem install sass      # install a newer version if needed

You now need to update your Sass configuration to generate source maps along with the CSS files. I use Grunt and grunt-contrib-sass to compile my Sass files, so I updated my gruntfile.js with the following:

sass: {
        dev: {
            options: {
                lineNumbers: true,
                style: 'expanded',

                // this is the key bit!
                sourcemap: true
            },
            files: {
                // your output:input files
                './static.css': 'sass/main.scss'
            }
       }
}

Enable in Chrome

The next step is to enable source maps in Chrome. Go to http://about:flags and make sure 'Enable Developer Tools' is enabled

A button marked 'restart' will appear at the bottom of the screen if you change anything, so click it to restart Chrome. Next, open dev tools by pressing F12 (or right-click > Inspect Element) and open the settings panel by clicking the gear icon in the top-right corner. Under the 'General' tab, make sure 'Enable CSS Source maps' is ticked

Hey presto! You should now be able to view the original file name and line number in dev tools, making finding the correct place to edit much easier!