Sass 混合在选择器之前答案

【问题标题】：Sass mixin to prepend to selectorSass 混合在选择器之前
【发布时间】：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');
    }
  }
}

这有可能吗？

【问题讨论】：

标签： sass mixins

【解决方案1】：

找到答案here。

可以通过使用 & 符号来实现。作为参考，在这种情况下所需的 mixin 是

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

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

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

【讨论】：

仅供参考：当您想要做的只是将另一个类修饰符添加到一个选择器的 content 时，这很棒。如果您想将该类修饰符（或完全新的选择器）添加到选择器的链/层次结构中，那么您似乎不走运 - 请参阅stackoverflow.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');
}

【讨论】：