26

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 maps for every file and that works fine - I can jump right into the .scss file when I Ctrl-Click a property. I can edit the .scss file then and it reloads correctly (compass task in the background), but unfortunately everything I change directly in the Styles panel is persisted only to the compiled .css file.

Styles panel

As soon as I change a value, the file changes to main.css and the changes are only persisted there:

Styles panel 2

Alex
  • 12,205
  • 7
  • 42
  • 52

3 Answers3

3

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.

.scss is exposed and editable by Devtools

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.

Benny K
  • 1,107
  • 12
  • 9
  • 3
    even though it is deprecated, I still think that it is very useful because developer can save the time of compiling the modified source again. – Luk Aron Oct 12 '19 at 12:19
0

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.

SynCap
  • 6,244
  • 2
  • 18
  • 27
-3

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

jaredwilli
  • 11,762
  • 6
  • 42
  • 41
  • 13
    I have already set up an workspace. I also can save changes to the SASS file but only if I open it in the DevTools editor. "Live" style changes are saved only to the .css file unfortunately, this is the problem. – Alex Mar 19 '14 at 17:12
  • 1
    Same issue here on OSX. I've resolved to use the tincr (http://tin.cr/docs.html) extension and just make edits in Aptana. I've got the browser floating above all other windows so that when I save in Aptana, Compass (which is watching my css/scss folders) updates the sourcemap file and the css file, and then tincr automatically updates chrome with the changes so that I don't have to refresh. Seems as if all these technologies combined are at the bleeding edge at the moment and they don't all play perfectly together just yet. For now, I am OK with this current workflow; but it can improve. – i_a Jun 28 '14 at 23:28