2

How we can enable live sass in devtools?

Base on Umaar post in own blog

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

BDL
  • 21,052
  • 22
  • 49
  • 55
Dark star
  • 5,192
  • 9
  • 35
  • 54

2 Answers2

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'.

CSS Source Maps

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

Workspaces

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

Developer Tools experiments

In Settings, you will see a new Experiments section:

Experiments

Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68
  • 4
    I really really wish this worked, but its not working for me. With setup as above, editing frm the Live edit will not change the sass source file. Im wondering if the experiment was terminated and removed? – Flion Nov 21 '18 at 16:33
2

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.

enter image description here

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.

kmiasko
  • 56
  • 1
  • 3