Enable live Sass DevTools experiment

Question

How we can enable live sass in devtools?

Base on Umaar post in own blog

https://umaar.com/dev-tips/103-live-sass/

Answer 1

To clarify "Enable CSS Source Maps" only allow your browser to show mappings between scss and css. Live SASS is is still experimental feauture. You'll be able to enable it by pressing SHIFT button six times on the experimental tab in the dev tools settings.

I tried it in latest unstable chrome build on Linux and it doesn't seem to work, so you'll need latest Canary build.

UPDATE:

It works in 53.0.2763.0 dev build on Linux.

Answer 2

Update: Looking at this again, there appears to be a new experimental feature that is apparently in Chrome Canary, which takes out the need to run sass watch I think. However, I am unable to actually find where this gets enabled. I left my original answer as it may be of use still.

This is no longer an experimental feature. In Settings, make sure 'Enable CSS source maps' is enabled and (optionally) 'Auto-reload generated CSS'.

You can add your source files as a Workspace and live edit:

On a side note, to enable experimental features in Chrome, navigate to chrome://flags/, enable Developer Tools experiments and restart Chrome.

In Settings, you will see a new Experiments section: