提取所有具有特定规则的 CSS 规则集答案

【问题标题】：Extract all CSS rules set that have a certain rule提取所有具有特定规则的 CSS 规则集
【发布时间】：2015-10-13 04:39:46
【问题描述】：

我被要求更改客户网站中使用的字体。他们正在使用商业模板。

我在样式表文件中进行了搜索，发现“font-family”在 12 个不同的文件中出现了近 400 次，我需要以某种方式覆盖它们。

我不想使用通用规则 (*)，因为感觉它会导致意外结果（例如阻止我使用第二个字体系列）

有什么想法吗？

我想也许我可以使用一些工具/软件将每个文件中的整个规则提取到一个单独的文件中，然后我可以轻松地复制它们并搜索替换字体系列，是否有这样的工具/软件？

我也可以使用 PHP 来查看这些文件并在运行时搜索/替换，但在每次页面加载时运行它似乎是一种不好的做法。

请指教，你会怎么做？

** 更多信息：**

我不想编辑原始文件或完全复制它们。我只想提取规则名称和 font-family 属性和值。

例子：

.some_rule {color: red;font-size: 16px;**font-family: 'whatever';**float: right;}

成为/提取：

    .some_rule {**font-family: 'whatever';**}

然后我只能将这部分复制到我的 override.css 文件中（例如）。谢谢！

** 更新 ** 我确信有更好的方法可以做到这一点，但为了我的需要，只需几行代码就可以完成，这就是我所做的：

这个 sn-p 只用我需要的东西创建一个新文件（或写入现有文件）。

【问题讨论】：

您不能在覆盖旧font-family 规则的主题样式表之后加载新样式表吗？
我会使用批量替换作为初学者，但 SASS 建议是要走的路
“几乎 400 次出现在 12 个不同的文件中” – 挑选出这些听起来最多需要一个小时的工作……所以把它交给实习生吧：p
更严肃一点——我可能更愿意使用 JavaScript 来处理这个客户端……从Document.styleSheets 的循环开始，然后从那里查看个人CSSStyleRules查看他们是否指定了该字体系列……如果是，selectorText 进入列表。

【解决方案1】：

听起来像是一个简单的编辑器可以在几分钟内完成的替换操作。

但您可能会考虑迁移到 SCSS 或其他 CSS 预编译器。

SCSS（例如，相对于 SASS）的优势在于它与 CSS 完全兼容，因此您只需将所有 CSS 文件重命名为 SCSS，配置 SCSS 编译器，即可启动并运行。

一旦你掌握了这些，你就可以开始用变量或 mixin 替换字体系列，然后你可以通过重构 CSS 文件的某些部分逐渐为它添加越来越多的结构。

如果您根本不想修改 CSS（因为它是商业模板，并且您可能希望能够下载更新），您可以收集字体的所有选择器并创建一个新的 CSS 文件它们，只覆盖那些特定选择器的字体。

【讨论】：