使用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重写为动态样式表,然后如果"第三方"也可以在动态样式表上工作而不是在静态CSS上工作则会很好.

如果这是不可能的,你将不得不这样做

• 每次从中获取新文件时查找/替换内容,或者
• 有你的额外CSS,你可以在他们的属性后调用它们(例如将font-family所有p标签设置为你的值)

那么,动态样式如何工作:你有一些你在开始时定义的变量,然后在整个文件中使用,如果你想改变一些东西,你就改变一个变量,整个文件得到更新.但你也可以使用更多花哨的东西,比如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,它在你调用它时将整个属性及其值添加到类中.网上有很多资源描述了如何安装和使用它.你可以从这里开始:

• 萨斯
• 减