Ni enostavno določiti izbirnika znotraj pripadajočega nabora pravil. S kvalificiranjem mislim na dodajanje imena elementa (npr. a) Razredu (npr. .btn), Tako da nabor pravil postane na primer specifičen za kombinacijo izbirnika elementov in izbirnika razreda (npr. a.btn).
Od danes naprej je najboljši (in zaenkrat edino veljaven način) to:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Vau, vsekakor ni zares elegantno, kajne? V idealnem primeru boste morda želeli skriti to grozljivo sintakso za mešanico, tako da boste imeli čist in prijazen API, še posebej, če imate v svoji ekipi razvijalce novincev.
To je seveda zelo preprosto:
/// 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; ) )Zdaj pa prepisujemo naš prejšnji delček:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Veliko bolje, kajne? Kljub temu qualifylahko zveni nekoliko težavno za neizkušene Sassove tinkarje. Vzdevek lahko navedete, če je opisnejše ime, na primer when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Še zadnji primer:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )