Mixin来限定选择器

没有简单的方法可以从与其关联的规则集中限定选择器。 通过限定，我的意思是将元素名称（例如a ）添加到类（例如.btn ）之前，以便规则集特定于元素选择器和类选择器（例如a.btn ）的组合。

到目前为止，最好的方法（到目前为止是唯一有效的方法）如下：

.button {
  @at-root a#{&} {
    // Specific styles for `a.button`
  }
}

哇，绝对不是很优雅，是吗？ 理想情况下，您可能希望将这种恐怖的语法隐藏在mixin的后面，以便保持干净友好的API，尤其是在团队中有菜鸟开发人员的情况下。

当然，这样做非常简单：

/// Since the current way to qualify a class from within its ruleset is quite
/// ugly, here is a mixin providing a friendly API to do so.
/// @author Hugo Giraudel
/// @param {String} $element-selector - Element selector
@mixin qualify($element-selector) {
  @at-root #{$element-selector + &} {
    @content;
  }
}

现在，重写我们之前的代码段：

.button {
  @include qualify(a) {
    // Specific styles for `a.button`
  }
}

好多了吧？ 尽管如此，对于没有经验的Sass修补匠来说， qualify听起来还是有些棘手。 您可以在更具描述性的名称（例如when-is时提供别名。

/// @alias qualify
@mixin when-is($args...) {
  @include qualify($args...) {
    @content;
  }
}

最后一个例子：

.button {
  border: none;
  
  // Qualify `.button` with `button`
  @include qualify(button) {
    -webkit-appearance: none;
  }
  
  // Qualify `.button` with `a`
  @include when-is(a) {
    text-decoration: none;
  }
}

翻译自: https://css-tricks.com/snippets/sass/mixin-to-qualify-a-selector/