Nincs egyszerű módja annak, hogy a kiválasztót a hozzá tartozó szabályhalmazból minősítsük. Minősítés alatt azt értem, hogy egy elem nevét (pl. a) Előkészítjük egy osztályba (pl. .btn), Hogy a szabálykészlet specifikusvá a.btnváljon például egy elemválasztó és egy osztályválasztó (pl. ) Kombinációjára .
A mai napig erre a legjobb (és eddig csak érvényes mód) a következő:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Hű, igazából nem igazán elegáns, igaz? Ideális esetben érdemes elrejteni ezt a fajta szörnyű szintaxist egy mixin mögött, hogy tiszta és barátságos API-t tartson, különösen, ha újonc fejlesztők vannak a csapatában.
Természetesen ez rendkívül egyszerű:
/// 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; ) )Most írjuk át az előző részletünket:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Sokkal jobb, igaz? Ennek ellenére qualifykissé trükkösnek tűnhet a tapasztalatlan Sass bádogosok számára. Álnevet adhat meg, ha egy leíróbb név, például when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Egy utolsó példa:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )