Det finns inget enkelt sätt att kvalificera en väljare från dess tillhörande regleruppsättning. Med kvalificering menar jag att förelägga ett elementnamn (t.ex. a) till en klass (t.ex. .btn) så att en regleruppsättning blir specifik för en kombination av en elementväljare och en klassväljare (t.ex. a.btn) till exempel.
Från och med idag är det bästa (och hittills enda giltiga sättet) att göra det enligt följande:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, definitivt inte riktigt elegant, eller hur? Helst vill du kanske dölja den här fasansfulla syntaxen bakom en mixin så att du håller ett rent och vänligt API, särskilt om du har rookie-utvecklare i ditt team.
Det är naturligtvis extremt enkelt:
/// 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; ) )Nu skriver vi om vårt tidigare utdrag:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Mycket bättre, eller hur? Kan ändå qualifylåta lite knepigt för oerfarna Sass-tinkare. Du kan ge ett alias när en mer beskrivande namn, till exempel when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Ett sista exempel:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )