Nėra lengvo būdo pasirinkti kvalifikatorių iš jo susietų taisyklių rinkinio. Kvalifikuodamas turiu omenyje elemento pavadinimo (pvz. a) Paruošimą klasei (pvz. .btn), Kad taisyklių rinkinys taptų specifiškas, pavyzdžiui, elementų parinkiklio ir klasės parinkiklio (pvz. a.btn) Deriniui.
Nuo šiandien geriausias (ir kol kas vienintelis galiojantis) būdas tai padaryti yra toks:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Oho, tikrai ne elegantiškas, ar ne? Geriausia, jei norėtumėte paslėpti šią siaubingą sintaksę už mišinio, kad išlaikytumėte švarią ir draugišką API, ypač jei jūsų komandoje yra naujokų kūrėjų.
Žinoma, tai padaryti yra labai paprasta:
/// 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; ) )Dabar, perrašydami ankstesnį fragmentą:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Geriau, tiesa? Vis dėlto tai qualifygali pasirodyti šiek tiek keblu nepatyrusiems „Sass“ tinkuotojams. Pseudonimą galite pateikti, kai aprašomesnis vardas, pvz., when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Paskutinis pavyzdys:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )