Nav vienkārša veida, kā atlasītāju kvalificēt ar tā saistīto kārtulu kopu. Ar kvalifikāciju es domāju elementa nosaukuma (piem. a) Sagatavošanu klasei (piemēram .btn), lai likumu kopa kļūtu specifiska, piemēram, elementu selektora un klases selektora (piem. a.btn) Kombinācijai .
No šodienas labākais (un līdz šim vienīgais derīgais veids) to darīt ir šāds:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, noteikti nav īsti elegants, vai ne? Ideālā gadījumā, iespējams, vēlēsities slēpt šāda veida šausminošo sintaksi aiz miksina, lai saglabātu tīru un draudzīgu API, it īpaši, ja jūsu komandā ir iesācēju izstrādātāji.
Protams, tas ir ļoti vienkārši:
/// 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; ) )Pārrakstot mūsu iepriekšējo fragmentu:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Daudz labāk, vai ne? Tomēr tas qualifyvar likties mazliet grūts nepieredzējušiem Sass tinkeriem. Varat norādīt aizstājvārdu, ja aprakstošāks nosaukums, piemēram when-is,.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Viens pēdējais piemērs:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )