0

I have a lengthy CSS file (over 1K lines prepared by 3rd party)

e.g.

p {font-family: Arial;}

I want to have a build process that change all "font-family" under the p tag to 

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

Definitely I can modify the existing CSS file, but as it is lengthly and prepared by others (might update by them in the future, maintenance nightmare..), I am looking for some external build process that allow me to rewrite the CSS and produce a final CSS.

Is it possible with Less or SASS or other tools?

4

2 回答 2

5

Sass 和 LESS 正是为此目的而构建的。但是您需要先将静态 CSS 重写为动态样式表，然后如果“第 3 方”也适用于动态样式表而不是静态 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，当您调用它时，它会将整个属性及其值添加到一个类中。网上有很多资源描述了如何安装和使用它。你可以从这里开始：

于 2013-05-11T08:52:12.773 回答
2

至于LESS，我会使用参数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;
}
于 2013-05-11T09:04:23.787 回答