google chrome - Chromium: missing sass support -


i tried enable support sass source mapping in chromium (v31.0.1606.0) seems there "support sass"-option missing in case.

i followed instructions: http://fonicmonkey.net/2013/03/25/native-sass-scss-source-map-support-in-chrome-and-rails/

screenshot of "experiments"-window: see http://i.stack.imgur.com/uhfnp.png

hint: tried google chrome canary , chrome v30 , didn´t worked either.

this 1 got me too, after reading nettuts article on developing sass , chrome devtools. seems articles on subject outdated.

turns out chrome v30 , later ship souce maps , sass support enabled defualt. in v29 , earlier have check "support sass" box.

furthermore, according google:
"currently sass preprocessor supports css source maps..."

so long don't uncheck "enable css source maps" in dev tools > settings > general, can hack away @ scss/sass directly chrome.

i followed google dev tools docs , got working on osx.8 canary 32.0.1664.3. here key points:

  1. make sure you're using sass 3.3.0alpha
    gem install sass -v '>=3.3.0alpha' --pre

  2. add --sourcemap flag when run sass shell
    sass --watch --sourcemap sass/styles.scss:styles.css

  3. optionally enable "auto-reload generated css" in dev tools > settings > general real-time goodness.

here's screenshot machine after following above steps , firing site sass.

debugging sass in chrome dev tools

sources:

working css preprocessors - chrome devtools – google developers

developing sass , chrome devtools | nettuts+


Comments

Popular posts from this blog

java - JavaFX 2 slider labelFormatter not being used -

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -