Kurospidey Kurospidey - 1 month ago 10
Sass (Sass) Question

DevTools: How to visualize scss changes automatically without the need to save

The question doesn't explain the whole situation. I'm aware of the Workspaces and of SASS source-maps. I'm already able- from the Styles panel- to track the line in the scss file where the specific rule is that I want to change.

That in itself is already a huge achievement, but what would improve a lot my workflow would be being able to visualize the changes as I'm making them live, and have DevTools save them automatically. That way I could instantly adjust elements.

That already can be done in plain CSS. In fact, DevTools is already changing the css file instantly even with SASS running. The problem is that as soon as you modify the scss file again, SASS will recompile and the change in the css file that DevTools made will be lost.

An image is worth more than 1000 words, so:
enter image description here


  1. I'm changing the left property of the red div instantly with my arrow keys. I'm visualizing the changes also instantly. No need to make changes manually, press Ctrl+S, see how the element looks, readjust, save again, etc.

  2. I know I want to change the left property so I click on the scss file and make the change in the Sources panel. Then I save the changes and see how they look. But I can't visualize them instantly as in plain CSS.



Is there any way to do what is already instantly done with css files in the Styles panel but with scss files?

It doesn't have to be done necessarily inside DevTools. Maybe there's an option for SASS to watch for changes in reverse (not only from scss to css).

I was looking for an answer in both directions but to no avail. Any help?

Answer

Unfortunately I don't think there's a good answer to your question. There are some ways to convert CSS to SCSS, but they're not intended to be an ongoing process, just a one time conversion.

It's best to only have the conversion one way, if it were bidirectional there'd be a lot of 'what if' situations with collisions that would get really hairy. It isn't a feature I'd want to try to figure out :P

In my workflow, I make small adjustments in the styles inspector (like you are above) and when I'm happy I copy those values to my SCSS file and recompile/reload the page. I think it's about as good as it gets without getting into really strange (probably) unexplored territory.

Small note: Chrome isn't actually editing the CSS file when you change it in the style inspector, it's just making adjustments to the DOM temporarily as if the changes were made where you made them. That's why it's lost on reload.