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

Question

我想在我的网站中使用这些Pygments stylesheets，但是他们使用的选择器（.codehilite）与我的网站生成器的HTML不匹配，后者会产生.highlight类的代码块

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

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

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

实施例

.codehilite .s { color: #e6db74 }

需要成为这个

.highlight .s { color: #e6db74 }

我正在查看selector-replace等SASS功能，但我无法弄清楚它是否适用。

Answer 1

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

以下是如何使用它的代码片段

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

哪个会编译到

.highlight .s {
  color: #e6db74;
}

但是说实话，我认为它并不适用于你的情况，因为当你只能更改codehilite选择器时，它看起来更像是矫枉过正，因为你的HTML元素都不会使用该类。但是，这个决定取决于你。我认为您可以更合适地使用selector-replace here

希望这有帮助

Answer 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。