Question

我有一个冗长的CSS文件（由第三方准备超过1K行）

e.g。

p {font-family: Arial;}

我希望有一个构建过程将p标签下的所有“font-family”更改为

p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}

当然我可以修改现有的CSS文件，但因为它是由其他人编写的（并且将来可能会由他们更新，维护噩梦......），我正在寻找一些外部构建过程，允许我重写CSS并生成最终的CSS。

是否可以使用Less或SASS或其他工具？

Answer 1

Sass和LESS正是为此目的而建造的。但是你需要首先将静态CSS重写为动态样式表，然后如果“第三方”也可以在动态样式表上工作而不是在静态CSS上，那将会很好。

如果无法做到这一点，则必须

所以，动态样式如何工作：你有一些你在开始时定义的变量，然后在整个文件中使用，如果你想改变一些东西，你改变一个变量并且整个文件得到更新。但你也可以使用更强大的东西，比如 mixins 和警卫，你可以在我答案底部粘贴的链接上阅读更多内容。你可以用这种方式防止大量改写。

因此，如果您打算在将来重复使用/更改文件，这将是有意义的。

有一个非常基本的说明性示例 - 如何在 LESS 中使用简单变量：

@pFontFam: "Helvetica Neue", Helvetica, Arial, sans-serif;

p {
  font-family: @pFontFam;
}

输出 CSS 如下所示：

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

但是你也可以定义一个mixin，它在你调用它时将整个属性及其值添加到类中。网上有很多资源描述了如何安装和使用它。你可以从这里开始：

Answer 2

至于LESS，我会使用parametric mixin（不含参数）：

您还可以使用不带参数的参数化mixins。这个如果要从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;
}