Ne postoji jednostavan način kvalificiranja izbornika unutar povezanog skupa pravila. Pod kvalifikacijom mislim na dodavanje imena elementa (npr. a) U klasu (npr. .btn) Tako da skup pravila postane specifičan za kombinaciju selektora elemenata i primjerice selektora klase (npr. a.btn).
Od danas je najbolji (i zasad jedini valjani način) to učiniti kako slijedi:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, definitivno nije baš elegantno, zar ne? U idealnom slučaju, možda biste htjeli sakriti ovu užasnu sintaksu iza kombinacije tako da zadržite čist i prijateljski API, pogotovo ako u svom timu imate programere novaka.
To je naravno vrlo jednostavno:
/// 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; ) )Sada, prepisujući naš prethodni isječak:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Puno bolje, zar ne? Ipak, qualifymože zvučati pomalo nezgodno za neiskusne Sassove tinkerere. Možete dodati pseudonim kada opisnije ime, kao što je when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Posljednji primjer:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )