有没有什么方法可以保存CSS diff而不是将整个样式表保存在Chrome Dev Tools中？

Question

我的问题与Chrome开发者工具有关.

这是我一天中的工作流程:我编辑Shopify主题.我使用Chrome开发者工具中的DOM检查器在页面上编辑CSS.对于每一个微小的编辑我很高兴,我需要点击样式表,复制和粘贴,我更新了整个的CSS规则,粘贴在评论后的主题样式表的底部产生的CSS规则/* Added by Caroline */,去掉我做的CSS属性.不编辑,并重复我编辑的每个CSS位.

在理想的世界中,我会继续编辑所有需要编辑的CSS以用于多个元素.然后我会转到Sources选项卡,右键单击并选择"Local Modifications",然后再选择这个无用的东西:

我会得到CSS我可以复制并粘贴在我的样式表底部/* Added by Caroline */.

我不想编辑样式表,其中包含要由服务器解析的Liquid标签和Sassy CSS.我只想在混合样式表的底部添加我在实时编辑CSS时提出的CSS差异.而已.

这有延伸吗？

Answer 1

Chrome DevTools允许您通过定义工作区来保存(覆盖)整个样式表.支持Sass,但只将您更改的样式作为一组单独的规则.

我怀疑问题是规则的顺序很重要.添加到样式表底部的规则可能与放置在页面上方的相同规则的效果不同.由于这些工具的目标是提交编辑,因此页面看起来与您看到的完全一样,只是将差异保存到底部可能会产生新问题或孤立某些样式.换句话说,您可能(现在可能已经发现)将更改后的规则添加到样式表的底部,然后需要调试不能正常工作的规则,添加更多规则来覆盖其他规则.

我知道,这不是你问题的真正答案,而是解释为什么这样的事情可能不存在.