Es gibt keine einfache Möglichkeit, einen Selektor aus dem zugehörigen Regelsatz heraus zu qualifizieren. Mit Qualifizieren meine ich a, einer Klasse (z. B. ) einen Elementnamen (z. B. .btn) voranzustellen, damit ein Regelsatz beispielsweise für eine Kombination aus einem Element- und einem Klassenselektor (z a.btn. B. ) spezifisch wird .
Ab heute ist der beste (und bislang einzig 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 schreckliche Syntax hinter einem Mixin verbergen, damit Sie eine saubere und benutzerfreundliche API beibehalten, insbesondere wenn Sie Rookie-Entwickler in Ihrem Team haben.
Dies ist natürlich sehr 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 Hugo Giraudel /// @param (String) $element-selector - Element selector @mixin qualify($element-selector) ( @at-root #($element-selector + &) ( @content; ) )Schreiben Sie nun unser vorheriges Snippet neu:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Viel besser, oder? Trotzdem qualifykann es für unerfahrene Sass-Bastler etwas knifflig klingen. Sie können einen Alias angeben, wenn Sie einen aussagekräftigeren Namen haben, z when-is.
/// @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; ) )