Nie je ľahký spôsob, ako kvalifikovať selektor z príslušnej množiny pravidiel. Kvalifikáciou mám na mysli predponu názvu prvku (napr. a) Pred triedu (napr. .btn), Aby sa sada pravidiel stala špecifickou napríklad pre kombináciu selektora prvkov a selektora triedy a.btn.
Od dnešného dňa je najlepším (a zatiaľ jediným platným spôsobom) nasledujúci postup:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Páni, rozhodne nie skutočne elegantná, však? V ideálnom prípade možno budete chcieť tento druh strašnej syntaxe skryť za mixín, aby ste udržali čisté a priateľské API, najmä ak máte vo svojom tíme nováčikovských vývojárov.
Je to samozrejme veľmi jednoduché:
/// 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; ) )Teraz prepisujeme náš predchádzajúci úryvok:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Oveľa lepšie, že? Napriek tomu to qualifymôže pre neskúsených drotárov Sass znieť trochu zložito. Alias by ste mohli uviesť, keď popisnejší názov, napríklad when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Jeden posledný príklad:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )