我有一个冗长的 CSS 文件（超过 1K 行由第 3 方准备）
例如
p {font-family: Arial;}
我想要一个构建过程，将 p 标签下的所有“font-family”更改为
p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}
我当然可以修改现有的 CSS 文件，但由于它很长并且由其他人准备（将来可能会由他们更新，维护噩梦..），我正在寻找一些外部构建过程，以便我重写CSS 并生成最终的 CSS。
是否可以使用 Less 或 SASS 或其他工具？
【问题讨论】：
标签： css sass less compass-sass
Sass 和 LESS 正是为此目的而构建的。但是您需要先将静态 CSS 重写为动态样式表，然后如果“第 3 方”也适用于动态样式表而不是静态 CSS，那就太好了。
如果这是不可能的，你将不得不
p 标记的 font-family 设置为您的值）那么，动态样式是如何工作的：你有一些你在开始时定义的变量，然后在整个文件中使用，如果你想改变一些东西，你改变一个变量并且整个文件得到更新。但是您也可以使用更多花哨的东西，例如 mixins 和 guards，您可以在我粘贴在答案底部的链接中了解更多信息。您可以通过这种方式避免大量重写。
因此，如果您打算在将来重用/更改文件，这将是有意义的。
对于一个非常基本的说明性示例 - 如何在 LESS 中使用一个简单的变量：
@pFontFam: "Helvetica Neue", Helvetica, Arial, sans-serif;
p {
font-family: @pFontFam;
}
输出 CSS 如下所示：
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
但是您也可以定义一个 mixin，当您调用它时，它会将整个属性及其值添加到一个类中。网上有很多资源描述了如何安装和使用它。你可以从这里开始：
【讨论】：
至于 LESS，我会使用 parametric mixin（不带参数）：
您还可以使用不带参数的参数混合。这 如果您想从 CSS 输出中隐藏规则集，这很有用，但是 想要在其他规则集中包含它的属性：
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
这会输出这个 CSS：
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
原因是您尝试在不同位置重复（或在一个集中位置修改）的值是一串字体名称，将始终与相同的 CSS 属性一起使用：font-family。你真的不需要一遍又一遍地重复这个属性。它不是可以在边距、填充和边框中使用的数值...
所以它会是这样的：
.fontBase () {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
.fontBase;
}
【讨论】：