DevTools：如何在不需要保存的情况下自动可视化scss更改

Question

这个问题并不能解释整个情况。我知道工作区和SASS源图。我已经能够从“样式”面板中跟踪scss文件中我想要更改特定规则的行。

这本身就已经是一项巨大的成就了，但是我的工作流程可以改善我的工作流程，并让DevTools自动保存它们。 这样我就可以立即调整元素。

已经可以在纯CSS中完成。事实上，即使在SASS运行的情况下，DevTools也已经立即更改了css文件。问题是，只要再次修改scss文件，SASS就会重新编译，并且DevTools所做的css文件的更改将会丢失。

图片价值超过1000字，所以：

1. 我正用箭头键立即改变红色div的左侧属性。我现在也可以直观地看到这些变化。无需手动更改，按Ctrl + S，查看元素的外观，重新调整，再次保存等。
2. 我知道我想更改左边的属性，所以我点击scss文件并在Sources面板中进行更改。然后我保存更改并查看它们的外观。但我无法像普通的CSS一样立即想象它们。

有没有办法在“样式”面板中使用css文件立即执行的操作，但是使用scss文件？

不必在DevTools中完成。也许SASS可以选择观察反向变化（不仅是从scss到css）。

我在两个方向寻找答案，但无济于事。有什么帮助吗？

Answer 1

不幸的是，我认为你的问题没有一个好的答案。有一些方法可以将CSS转换为SCSS，但它们不是一个持续的过程，只是一次转换。

最好只进行单向转换，如果它是双向的，那么很多＆＃39;如果＆＃39;碰撞会导致毛茸茸的情况。这不是我想要弄清楚的一个特征：P

在我的工作流程中，我在样式检查器中做了一些小调整（就像你上面一样），当我很高兴我将这些值复制到我的SCSS文件并重新编译/重新加载页面。我认为如果没有进入真正奇怪的（可能）未探索的领域，它就会变得越来越好。

小注意事项：当您在样式检查器中更改CSS文件时，Chrome实际上并未编辑CSS文件，它只是临时调整DOM，就像您在其中进行更改一样。这就是为什么它在重装时会丢失的原因。

Answer 2

DevTools有一个名为Live Sass的实验性功能

如果您启用＆＃34; live sass＆＃34;实验，您可以在“来源”面板中编辑Sass代码并立即查看结果，我已在此处制作了有关其工作原理的gif：https://umaar.com/dev-tips/103-live-sass/

问题是：由于它是实验性的，它可能无法按预期工作！