Sass混合到预编到选择器

是否可以使SASS mixin预先将其输出发送到选择器？我用来检查浏览器的svg功能。当支持svg时，它将

svg

类输出到

元素

我希望

背景图像

根据svg功能进行更改。基本上，这就是我需要的：

.container .image { background-image: url('some.png'); }
html.svg .container .image { background-image: url('some.svg'); }

我希望在我的SCS中有一个mixin，我可以通过以下方式

@包括

：

.container {
  .image {
    background-image: url('some.png');
    @include svg-supported {
      background-image: url('some.svg');
    }
  }
}

不必写：

.container {
  .image {
    background-image: url('some.png');
  }
}

@include svg-supported {
  .container {
    .image {
      background-image: url('some.svg');
    }
  }
}

这有可能吗？

找到了答案

可以使用符号和符号。作为参考，本例中所需的mixin为

@mixin svg-supported {
  html.svg & {
    @content;
  }
}

这可以通过以下方式使用：

.image {
  background-image: url('some.png');
  @include svg-supported {
    background-image: url('some.svg');
  }
}

---

仅供参考：当您只想向一个选择器的内容添加另一个类修饰符时，这非常好。如果您想将该类修饰符（或一个新的选择器）预先添加到选择器链/选择器层次结构中，那么您似乎运气不好-请参阅