Chrome DevTools可以直接保存CSS更改到SASS文件中。

Question

能否直接在“样式”面板中进行的样式更改不仅会持久保存到.css文件中，还会保存到相应的.scss文件中？

我每个文件都有CSS源映射表，这很好用-当我Ctrl-Click属性时，我可以直接跳转到.scss文件。然后我可以编辑.scss文件，并且它会正确地重新加载（后台有罗盘任务），但是不幸的是，我在样式面板中直接更改的所有内容仅持久保存到编译后的.css文件中。

只要我更改了某个值，文件就会更改为main.css，更改内容仅在那里持久保存：

- Alex

---

两年时间、超过1151次浏览，却没有答案？有人来帮帮我们吧！ - Alexander Flenniken

仍未解决 - 仍然在实时编辑中进行的更改仅保存到CSS文件中。 - Maximilian Köhler

2018年10月，仍在等待Chrome Devtools中的此功能。 - Doc Kodam

你有找到解决方案吗？他们将其作为Chrome标志实验，然后将其删除，现在又说一切都按预期工作，这相当荒谬。如果有什么不同的话，那就是鼓励我使用普通的CSS和@import，因为它对于实时设计创建更有效。 - Firsh - justifiedgrid.com

Answer 1

SASS/SCSS实时编辑不再像以前那样工作，因为它已被Chromium团队废弃：

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

我们过去有一个叫做“LiveSASS”实验，可以将更改传播回SASS/sourcemapped CSS。由于没有明确的前进路径，该实验最终被废弃并删除。

更新： 但是，sourcemaps仍然有效，并且鉴于：

• 您的CSS已与SASS文件进行了sourcemapping
• 您已将css/sass文件夹添加到工作区（即Devtools可以在您的文件系统中访问它们）
• 您正在从localhost提供您的网站（或至少提供 .css 文件）

您将获得 Devtools的样式选项卡中公开的 .scss 文件。

要进行编辑：只需双击 .scss 文件名，即可在Sources选项卡中用于编辑和保存。虽然不如直接在Styles选项卡中进行编辑，但仍然非常有用。我几乎用这种方式进行所有与css相关的编辑。

注意：如果您在Styles选项卡中更改值，更改将保留在您的 .css 文件而不是 .scss 文件中！ 即使界面显示不同。

额外提示：如果您添加符号链接/将css框架安装到 node_modules 中，以便Devtools可以访问它们，您还将获得对所有框架的sass文件的访问权限。只需小心不要将整个 node_modules 暴露给“实时刷新”Webpack服务器，因为它将观察到其中的100,000个文件。

- Benny K

---

尽管它已被淘汰，但我仍认为它非常有用，因为开发人员可以节省重新编译修改后的源代码所需的时间。 - Luk Aron

Answer 2

是的，这是可能的。

但有一些限制：

1. 不是文件，而是编辑器 - Sublime Text 3，现在可能还有其他的
2. 没有精确的SASS语法，但支持SCSS。同样支持LESS和纯CSS。

为了使故事保持真实，您需要一些工具，您可以在这里找到。 这些工具中的一堆被命名为“Emmet Live Style”。

开发人员承诺很快会支持Stylus和SASS。

- SynCap

Answer 3

如果您设置了工作区，则可以将Sass保存到计算机上的文件中。

以下是设置方法https://www.youtube.com/watch?v=bqfoYaKCYUI#t=3m39s。

- jaredwilli

---

我已经设置好了工作区，并且可以在 DevTools 编辑器中打开 SASS 文件来保存更改。但是，“实时”样式更改只能保存到 .css 文件中，这是问题所在。请注意，不会改变原意，尽可能通俗易懂。 - Alex

在OSX上也遇到了同样的问题。我决定使用tincr（http://tin.cr/docs.html）扩展程序，在Aptana中进行编辑。我将浏览器浮动在所有其他窗口之上，这样当我在Aptana中保存时，Compass（它正在监视我的css/scss文件夹）会更新sourcemap文件和css文件，然后tincr会自动使用更改更新chrome，以便我不必刷新。似乎所有这些技术的结合目前都处于领先地位，它们还不能完美地协同工作。目前，我对当前的工作流程感到满意；但它可以改进。 - i_a