Sass 混合在选择器之前
Posted
技术标签:
【中文标题】Sass 混合在选择器之前【英文标题】：Sass mixin to prepend to selector 【发布时间】：2013-11-02 23:52:41 【问题描述】：是否可以让 SASS mixin 将其输出添加到选择器？我使用Modernizr 来检查浏览器的svg 功能。当支持 svg 时，它将svg 类输出到<html> 元素。
我希望 background-image 根据 svg 功能进行更改。基本上，这就是我所需要的：
.container .image background-image: url('some.png');
html.svg .container .image background-image: url('some.svg');
我希望在我的 SCSS 中拥有一个 mixin，我可以通过以下方式 @include：
.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');
这有可能吗？
【问题讨论】：
【参考方案1】：找到答案here。
可以通过使用 & 符号来实现。作为参考，在这种情况下所需的 mixin 是
@mixin svg-supported
html.svg &
@content;
这可以通过以下方式使用：
.image
background-image: url('some.png');
@include svg-supported
background-image: url('some.svg');
【讨论】：
仅供参考：当您想要做的只是将另一个类修饰符添加到一个选择器的 content 时，这很棒。如果您想将该类修饰符（或完全新的选择器）添加到选择器的链/层次结构中，那么您似乎不走运 - 请参阅***.com/questions/23230430/…【参考方案2】：对于那些通过搜索看到这一点的人，我想改进@RJo 的答案，以添加对此 mixin 的根包含的支持：
@mixin svg-supported
$parent-selector: &;
@at-root html.svg #$parent-selector
@content;
这样，即使您在文件的根目录中包含 mixin，它也可以工作，如下所示：
@include svg-supported
background-image: url('some.svg');
【讨论】：
以上是关于Sass 混合在选择器之前的主要内容，如果未能解决你的问题，请参考以下文章