Mixin zur Qualifizierung eines Selektors

Es gibt keine einfache Möglichkeit, einen Selektor aus seinen zugehörigen Regeln zu qualifizieren. Mit Qualifizieren meine ich, einen Elementnamen (z. B. a) einem Klassennamen (z. B. .btn) voranzustellen, damit eine Regel spezifisch für eine Kombination aus Elementselektor und Klassenselektor (z. B. a.btn) wird.

Bis heute ist der beste (und bisher einzige gültige Weg) dies zu tun wie folgt:

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

Wow, definitiv nicht wirklich elegant, oder? Idealerweise möchten Sie diese Art von schrecklicher Syntax hinter einem Mixin verstecken, damit Sie eine saubere und freundliche API beibehalten, insbesondere wenn Sie unerfahrene Entwickler in Ihrem Team haben.

Das zu tun ist natürlich extrem einfach

/// 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;
  }
}

Nun, wenn wir unseren vorherigen Schnipsel umschreiben

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

Viel besser, oder? Dennoch kann qualify für unerfahrene Sass-Bastler etwas knifflig klingen. Sie könnten einen Alias mit einem beschreibenderen Namen wie when-is bereitstellen.

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

Ein letztes Beispiel

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