是否可以从导入的样式表中替换选择器？答案

【问题标题】：Is it possible to replace a selector from imported stylesheet?是否可以从导入的样式表中替换选择器？
【发布时间】：2016-11-09 16:08:30
【问题描述】：

我想在我的网站中使用这些 Pygments stylesheets，但是他们使用的选择器 (.codehilite) 与我的网站生成器的 HTML 不匹配，该生成器生成带有 .highlight 类的代码块。

我正在使用 SASS 和 Gulp 处理我的样式我希望能够像这样导入样式：

@import "./pygments-css/monokai";

有没有办法可以替换导入文件中的选择器？

示例

.codehilite .s { color: #e6db74 }

需要变成这个

.highlight .s { color: #e6db74 }

我正在查看诸如 selector-replace 之类的 SASS 函数，但我不知道它是否适用。

【问题讨论】：

您使用的是哪个网站生成器？
我正在使用 Hugo。
您是从网络加载 pygments css 文件吗？猜不，所以只需进入文件并将codehilite与highlight交换。
是的，我将 pygments-css 存储库作为我的 Git 存储库中的子模块。您建议的是一个简单的解决方案，但我更喜欢不需要复制或以其他方式更改 pygments-css 代码的解决方案。
根据您正在使用的 repo 的作者： * 您应该更改 .codehilite 以使用您用于 Pygments HTML 输出的样式名称。 * 所以我想你可以改变它们:)

标签： css sass

【解决方案1】：

selector-replace 可用于实现您想要的功能，但为了使该功能正常工作，您需要从.codehilite .s 选择器中调用它，否则它不会被覆盖

下面是如何使用它的代码sn-p

.codehilite .s
  @at-root #{selector-replace(&, '.codehilite', '.highlight')}
    color: #e6db74

哪个会编译成

.highlight .s {
  color: #e6db74;
}

但老实说，我认为它并不真正适用于您的情况，因为当您只需更改 codehilite 选择器时，它似乎更像是矫枉过正，因为您的 HTML 元素都不会使用该类。然而，这个决定取决于你。我想你可以找到更合适的用法selector-replacehere

希望对你有帮助

【讨论】：

【解决方案2】：

根据http://sass-lang.com/guide#topic-7，有@extend，其工作原理如下：

.highlight .s {
    @extend .codehilite .s;
}

这应该基本上采用适用于.codehilite .s的规则并将相同的规则应用于.highlight .s，结果是：

.highlight .s, .codehilite .s {
    color: #e6db74
}

注意：要使 Sass 正常工作，需要导入原始的 CSS/Sass。

【讨论】：

这不会要求我为每条规则都写下这个吗？另外我认为它会在我的最终 CSS 文件中给我重复。
Pygments 只提供 CSS，不提供 Sass。您的生成器仅输出硬编码的类。长话短说：您要么重写 Pygments CSS（这意味着以后不能再更新），要么为所有规则创建一个映射，如上所示。或者自己编写一个搜索替换程序并使用它来转换 Pyglets CSS。