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

时间:2016-11-08 18:14:37

标签: css sass google-chrome-devtools

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

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

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

图片价值超过1000字,所以: enter image description here

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

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:1)

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

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

问题是:由于它是实验性的,它可能无法按预期工作!