Sass now even better in Chrome!

So you've tried Sass and you love it. No more CSS-mess for you no more! BUT (isn't there BUT always?) when debugging your code in your favourite Chrome the line numbers in Styles tab do not refer to exact lines in your Sass source file. These refer to generated CSS file that you no longer directly modify. So in dev. tools you still see line number refering to CSS file:

It would be so much easier if tools referred directly to Sass source file as below:

Now (and have been for a while to be honest) it is possible as Chrome allows use of source maps. This basically will map properties from CSS file that browser uses to style elements to source Sass file you directly edit.

To make it happen you need to have late version of Sass installed, at the time of writing this is 3.3.0.rc.2 (whole list of versions can be found here). If you don't have it yet simply run:

gem install sass --version=3.3.0.rc.3

One note.. there is a long list of versions available. As I found out installing anything above version 3.3.0.alpha.201 and running sass with --watch argument does not seem to detect when the file is being updated. --watch argument as you probably know makes Sass to detect when new version of the scss file is saved and recompiles css accordingly. In versions newer then 3.3.0.alpha.201 this doesn't seem to work, at least on my system. That might be fixed by the time you reading this, but I couldn't get it working even with the current latest RC3. If thats the case and you find --watch useful install Sass via gem install sass --version=3.3.0.alpha.201

Now you have Sass installed so go to Chrome dev. tools settings ans tick as below:

And after that you need to tell Chrome where the source file is so it can map CSS properties to it. To do that in Settings-->Workspace "Add folder" and point to the folder where source file is located. Chrome will ask you to confirm that you want to give access to this particular location.

Right, Chrome part is set, all we need to do is run Sass with additional --sourcemap argument e.g.:

sass --sourcemap --watch path_to_scss_file:path_to_css_file

Now you might remember --debuginfo argument used with earlier versions of SASS, this is no more and now --sourcemap does the trick.

And that's pretty much all, hit F5 to refresh the page and enjoy new and improved Styles tab with line numbers referring to Sass file.