How do you debug your SASS code? Do you go use your Web Inspector under developer tools, go to the CSS and search for the same selector like some kind of animal?
Perhaps you have a comment in your CSS above each selector giving you the line number and .scss file name.

That’s so 2013!

Meet Source Maps

The SASS compiler gives you an option to use a source map, this way your Web Inspector can directly point to your .scss file instead of you having to find where that selector originally is.
If you remember earlier this year I mentioned using Grunt for automating your coding process, if you already have Grunt it’s as easy as adding:

1

sourceMap: true

within your SASS plugin option.
full config example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

sass: {
	dist: {
		files: {
			'style.css': 'style.scss',
			'reset.css': 'reset.scss'
		},
		options: {
			sourceMap: true
		}
	}
}

If you’re compiling your SASS with the sass command line tool, you have to make sure you’ve got the latest beta version of SASS, install it via:

gem install sass --pre

Then you can compile using this command:

sass style.scss style.css --sourcemap

Source map should be generated at style.css.map

Once using your Chrome Web Inspector, make sure you choose Enable Source Maps from the General Settings:

You should be seeing the original .scss selectors:

Pretty cool, right?

Hopefully it’ll save you a few hours down the road.

Firefox has a plugin called FireSass that should do something similar to what Chrome does.
There's also a guide on Mozilla's website to show you how to do that with Firefox's Developer Tools.

Until next week!