Chrome DevTools save CSS changes directly to SASS file

Question

Is it possible to have style changes done directly in the \"Styles\" panel not only persisted to the .css but also to the corresponding .scss file?

I have CSS source ma

Answer 1

If you set up a Workspace then you will be able to save Sass to your files on your computer.

Here's how to set it up https://www.youtube.com/watch?v=bqfoYaKCYUI#t=3m39s

Answer 2

SASS/SCSS live editing no longer works as it was depreciated by Chromium team:

https://bugs.chromium.org/p/chromium/issues/detail?id=863408#c5

We used to have the "LiveSASS" experiment a while ago that would propagate changes back to SASS/sourcemapped CSS. The experiment was eventually deprecated and removed due to no clear path forward.

UPDATE: however, sourcemaps still work fine and given that:

• your CSSs are sourcemapped to SASS files
• you have added the folder with css/sass to workspace (i.e. Devtools can access them in your filesystem)
• you're serving your website (or at least .css files) from localhost

you will get .scss files exposed in Devtools' Styles tab.

To edit: just double-click .scss file name and it will be available in Sources tab for editing and saving. Not as streamlined as direct editing in Styles tab, but still quite useful. I do almost all my css-related edits this way.

NOTE: if you change values in Styles tab, changes will persist in your .css files and not .scss! Even though interface shows otherwise.

Extra hint: if you add a symlink / install your css framework into node_modules so it's accessible to Devtools, you will get access to all framework's sass-files also. Just be careful not to expose whole node_modules to your "live refreshing" Webpack server, as it will choke on 100,000 of files inside node_modules to observe.

Answer 3

Yes, it's possible.

But with some limitations:

1. Not to file, but to editor - Sublime Text 3, and now may be some other
2. Not exact SASS syntax, but SCSS. Also LESS and plain CSS are supported.

For the tale can stay a the reality you need a some tools that you can find here. The bunch of these tools named "Emmet Live Style".

The developer promise support for Stylus and SASS soon.