有啥方法可以保存 CSS 差异而不是在 Chrome 开发工具中保存整个样式表？

Posted 2023-03-05

【中文标题】有啥方法可以保存 CSS 差异而不是在 Chrome 开发工具中保存整个样式表？

【英文标题】：Any way to save a CSS diff rather than save the entire stylesheet in Chrome Dev Tools?有什么方法可以保存 CSS 差异而不是在 Chrome 开发工具中保存整个样式表？

【发布时间】：2014-03-19 06:07:16

【问题描述】：

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

这是我日复一日的工作流程：我编辑 Shopify 主题。我使用 Chrome 开发者工具中的 DOM 检查器编辑页面上的 CSS。对于我满意的每个微小编辑，我需要单击样式表，复制并粘贴我更新的整个 CSS 规则，将生成的 CSS 规则粘贴到主题样式表底部的注释 /* Added by Caroline */ 之后，删除 CSS我没有编辑的属性，并为我编辑的每个 CSS 位重复。

在理想情况下，我会继续编辑我需要编辑的所有 CSS，为几个元素。然后我会去Sources选项卡，右键单击并选择“Local Modifications”，然后代替这个无用的东西：

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

我不想编辑样式表，其中包含要被服务器解析的 Liquid 标签和 Sassy CSS。我只想在该混合样式表的底部添加我在实时编辑 CSS 时提出的任何 CSS 差异。就是这样。

这个有扩展吗？

【问题讨论】：

我也非常想要这个 +1

一个带有一些答案的老问题：Export CSS changes from inspector (webkit, firebug, etc)。遗憾的是，自那以后并没有太大变化。

【参考方案1】：

Chrome DevTools 允许您通过defining a workspace 保存（覆盖）整个样式表。支持 Sass，但不支持仅将您更改的样式作为单独的规则集。

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

我知道，这并不是对您问题的真正答案，而是对为什么这样的事情可能不存在的解释。