css - 使用 Less 或其他工具修改 CSS？

Question

我有一个很长的 CSS 文件(超过 1K 行由第三方准备)

例如

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 重写为动态样式表，然后如果“第 3 方”也可以处理动态样式表而不是静态 CSS 就好了。

如果这是不可能的，你将不得不

• 每次从他们那里获得新文件时查找/替换内容，或者
• 让你在他们之后调用的额外 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，在您调用它时将整个属性及其值添加到一个类中。网上有很多资源描述了如何安装和使用它。你可以从这里开始:

• > Sass
• > LESS