Any way to edit sass/scss file from styles tab in Chrome DevTools

Question

Editing sass/scss is working via source maps only through code editor in devtools.

But when i make changes in elements -> styles tab, these changes are not saved to sass/scss file.

For example, if I change border-radius to another value, it will not be saved to scss file.

Here is my scss code

.SiteBuilder .e-row__select {
  position: relative;

  &:after {
    content: '';
  }

  select {
    border-radius: 4px;
  }
}

Answer 1

The styles you see from inspector are coming only from css files.

You can see the "sass/scss" source for each css property because there is a *.css.map associated with the current css file. The *.css.map file is generated from the sass compiler.

Every change you make on the Styles tab is not saved anywhere.

In order to make css changes you could use Chrome Devtools "Local Overrides" or "Workspaces". But even on this case you could edit the css or scss files from the Sources tab, not from the inspector.