Der er ingen nem måde at kvalificere en vælger inden for dens tilknyttede regelsæt. Med kvalificering mener jeg at forudse et elementnavn (f.eks. a) Til en klasse (f.eks. .btn), Så et regelsæt bliver specifikt for en kombination af en elementvælger og en klassevælger (f.eks. a.btn).
Fra i dag er den bedste (og indtil videre eneste gyldige måde) at gøre det på følgende måde:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, bestemt ikke rigtig elegant, er det? Ideelt set vil du måske skjule denne slags forfærdelige syntaks bag et mixin, så du holder en ren og venlig API, især hvis du har rookie-udviklere i dit team.
Det er selvfølgelig ekstremt simpelt:
/// 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 omskriver vores forrige uddrag:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Meget bedre, ikke? Alligevel qualifykan lyde lidt tricky for uerfarne Sass tinkerers. Du kan angive et alias, når et mere beskrivende navn, f.eks when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Et sidste 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; ) )