Valijat ei saa hõlpsalt kvalifitseerida selle seotud reeglistiku hulgast. Kvalifitseerimise all pean ma silmas elemendi nime (nt a) ette valmistamist klassile (nt .btn), nii et reeglistik oleks spetsiifiline näiteks elemendivalija ja klassivalija (nt a.btn) kombinatsioonile .
Tänaseks on parim (ja seni ainus kehtiv viis) selleks järgmine:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, kindlasti mitte päris elegantne, kas pole? Ideaalis võiksite peita sellist kohutavat süntaksit miksi taha, et hoiate puhast ja sõbralikku API-d, eriti kui teie meeskonnas on algajate arendajaid.
See on muidugi äärmiselt lihtne:
/// 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; ) )Nüüd kirjutage meie eelmine koodilõik ümber:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Palju parem, eks? Sellegipoolest qualifyvõib see tunduda kogenematute Sassi nokitsejate jaoks pisut keeruline. Võite pakkuda varjunime, kui kirjeldavam nimi, näiteks when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Viimane näide:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )