How to make Chrome understand the SASS/SCSS in your rails app | Hacker News Reader

How to make Chrome understand the SASS/SCSS in your rails app

fonicmonkey.net

37 pointsfoobar2k9 comments

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.

I'm trying to make it work with Assets Pipeline and Compass with no luck. Any ideas?

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.

There were a few things I noticed:

- You need to be using 'sass-rails', not 'sass', in your Gemfile for config.sass to work. Don't put it in the :assets group, either.

- You must set config.sass.compress = false (or rather, you must not set it to true!)

- You'll probably need to blow away your assets cache (tmp/cache/assets/* or public/assets/*) to see the changes.

I just got it working with a Rails app at work, and I am pleased with the results. Chrome Web Inspector continues to make my life easier!

Thank you for help. With all of that, I'm still getting no result.

Second line of CSS/SCSS reference appears but it's like ..:4 and points to no file.

Screenshot: http://i.imgur.com/4EJBBjd.png

I had the exact same issue. What fixed it for me was what the parent said of adding this line, too:

config.sass.compress = false

Clear you cached assets, restart your server and reload the page. That should hopefully fix it for you.

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! :)

Reply on news.ycombinator.com