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

Question

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

例如，

p {font-family: Arial;} 

我想有一个生成过程改变一切“FONT-FAMILY” p标签下

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

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

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

Answer 1

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

如果无法做到这一点，你将不得不

• 查找/每次你从他们那里得到新的文件时，更换的东西，或
• 有你，你他们之后将覆盖调用额外的CSS自己特性（如设置font-family所有p标签的值）

---

那么，怎么办es动态样式工作：你有一些变量，你在开始时定义，然后在整个文件中使用，如果你想改变某些东西，你改变一个变量，整个文件被更新。但你也可以使用更多花哨的东西，比如mixins和后卫，你可以在我粘贴在我的答案底部的链接上阅读更多内容。你可以通过这种方式防止很多重写。

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

对于一个非常基本的说明性的例子 - 你怎么会在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

Answer 2

至于少了，我会使用一个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; 
}