From the top comment (to save the scroll-conservative 30 seconds of doubt and confusion):
----
Michael Laccetti says:
Just a quick note that the ‘Experiments’ tab under the developer console will not show up unless you specifically enable it under chrome://flags (Enable Developer Tools experiments)
I'm fairly certain this doesn't work with current versions of Chrome. The experimental support for the -sass-debug-info that this method uses was removed in favor of real sourcemaps landing in sass version 3.3.0.
You can try using the alpha release of sass 3.3.0 to get real sourcemaps but I haven't had any luck getting it to work with rails. It also will not work with compass 0.13.alpha, you have to downgrade to 0.12.2.
It's solid on the Chrome stable and beta channels, but possibly not on Canary. I'd hope they'll wait until sass 3.3 is released before removing the debug-info support from more stable channels.
You're getting a ..:14 because Chrome is looking for the SASS files but is unable to, due to the lack of media query in the CSS file.
Here's a prefix example your css should output:
@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/kai\/Play\/live\/screen\.scss}line{font-family:\0000311}}
.box {
..
}
Hope this helps other understand why this occurs! :)
Do you have the 'sass-rails' gem in your Gemfile? It's possible to have the asset pipeline work with just the 'sass' gem, but to get the full debug-info that Chrome requires you need to be using 'sass-rails' and specify the config options mentioned in the post.
----
Michael Laccetti says:
Just a quick note that the ‘Experiments’ tab under the developer console will not show up unless you specifically enable it under chrome://flags (Enable Developer Tools experiments)