用于限定选择器的 Mixin

在关联规则集内部没有简单的方法来限定选择器。限定是指在类名前面添加一个元素名称（例如 a），这样规则集就针对元素选择器和类选择器的组合（例如 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 Kitty 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`
  }
}

好多了，对吧？但是，qualify 对没有经验的 Sass 玩家来说可能有点棘手。你可以为一个更具描述性的名称提供别名，例如 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;
  }
}