css - 我如何比较 2 个 CSS 文件以查看它们是否*语义*相同？

Question

我正在重构一些 SCSS 代码，并希望确保生成的 CSS 代码不会在语义上发生变化，即使它在字面上发生了变化。重构包括创建一个 mixin 并用 mixin 的包含替换在许多地方重复的代码片段。

问题是在某些地方属性 a 列在属性 b 之前，但在其他地方则相反。使用 mixin 当然会为它的所有使用产生一致的顺序。因此，简单的文本比较会产生我不希望的差异。

例如，如果我从这段代码开始:

.foo {
  background: white;
  color: brown;
}

.bar {
  color: brown;
  background: white;
}

...然后将其重构为:

@mixin my-colors {
  background: white;
  color: brown;
}

.foo {
  @include my-colors
}

.bar {
  @include my-colors
}

..然后为 .bar 生成的文本将发生变化，即使作为无序集的属性没有变化。换句话说，文本比较将显示 CSS 已更改，而实际上它在语义上没有更改。

有没有办法比较文件，从而忽略这些不一致的顺序？

Answer 1

你可以用一个程序来做。如果将属性粘贴到前版本的数组中，并从后版本的数组中减去属性，则非逻辑更改的类将导致空数组。在 Ruby 中太简单了!