Ei ole helppoa tapaa luokitella valitsinta siihen liittyvästä sääntöjoukosta. Karsinnalla tarkoitan elementin nimen (esim. a) Valmistamista luokalle (esim. .btn) Niin, että sääntöjoukko tulee spesifiseksi esimerkiksi elementin valitsimen ja luokan valitsimen (esim. a.btn) Yhdistelmälle .
Tästä päivästä alkaen paras (ja toistaiseksi ainoa pätevä tapa) tehdä se on seuraava:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Vau, ei todellakaan ole todella tyylikäs, vai mitä? Ihannetapauksessa saatat haluta piilottaa tällaisen kauhistavan syntaksin mikin taakse, jotta säilytät puhtaan ja ystävällisen sovellusliittymän, varsinkin jos tiimissäsi on alokas kehittäjiä.
Se on tietysti erittäin yksinkertaista:
/// 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; ) )Kirjoita nyt edellinen katkelma uudestaan:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Paljon parempi, eikö? Silti qualifyvoi kuulostaa hieman hankalalta kokemattomille Sass-tinkerereille. Voit antaa aliaksen, kun kuvaavampi nimi, kuten when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Viimeinen esimerkki:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )