Det er ingen enkel måte å kvalifisere en velger fra innenfor tilhørende regelsett. Ved å kvalifisere mener jeg å forhåndsstille et elementnavn (f.eks. a) Til en klasse (f.eks. .btn) Slik at et regelsett blir spesifikt for en kombinasjon av en elementvelger og en klassevalg (f.eks. a.btn).
Per i dag er den beste (og hittil eneste gyldige måten) å gjøre det som følger:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, absolutt ikke veldig elegant, er det? Ideelt sett vil du kanskje skjule denne typen forferdelige syntaks bak en mixin slik at du holder et rent og vennlig API, spesielt hvis du har rookie-utviklere i teamet ditt.
Å gjøre det er selvfølgelig ekstremt 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; ) )Nå skriver du om vår forrige kodebit:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Mye bedre, ikke sant? Likevel qualifykan høres litt vanskelig for uerfarne Sass tinkerers. Du kan oppgi et alias når et mer beskrivende navn, for eksempel when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Et siste eksempel:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )