Chrome DevTools save CSS changes directly to SASS file
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
.cssfiles) 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.
Yes, it's possible.
But with some limitations:
- Not to file, but to editor - Sublime Text 3, and now may be some other
- 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.
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