任何方式来保存CSS diff而不是在Chrome开发工具中保存整个样式表？

我的问题涉及Chrome开发者工具.

这是我每天工作流的一天：我编辑Shopify主题.我在Chrome Developer Tools中使用DOM检查器在页面上编辑CSS.对于每个微小的编辑,我都很高兴,我需要点击样式表,复制并粘贴我更新的整个CSS规则,粘贴生成的CSS规则在主题样式表的底部,注释/ *由Caroline * /,删除我没有编辑的CSS属性,并重复我编辑的每个CSS位.

在理想的世界中,我将继续编辑所有需要编辑的CSS的几个元素.然后我将转到“资源”选项卡,右键单击并选择“本地修改”,而不是这个无用的东西：

我会得到CSS我可以复制和粘贴在我的样式下面我的/ *加Caroline * /.

我不想编辑一个样式表,其中包含Liquid标签和Sassy CSS,由服务器解析.我想只是添加在这个混合样式表的底部,无论什么CSS差异,我想出来,而实时编辑CSS.而已.

这是否有扩展？

解决方法

Chrome DevTools可以让您在 defining a workspace之前保存(覆盖)整个样式表.Sass是受支持的,但只能将您所更改的样式作为单独的一组规则.

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

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