Nu există o modalitate ușoară de a califica un selector din setul de reguli asociat. Prin calificare, mă refer la prefixarea unui nume de element (de exemplu a) la o clasă (de exemplu .btn), astfel încât un set de reguli să devină specific unei combinații între un selector de element și un selector de clasă (de exemplu a.btn).
Începând de astăzi, cel mai bun (și până acum singurul mod valid) de a face acest lucru este următorul:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Uau, cu siguranță nu chiar elegant, nu-i așa? În mod ideal, s-ar putea să doriți să ascundeți acest tip de sintaxă oribilă în spatele unui mixin, astfel încât să păstrați un API curat și prietenos, mai ales dacă aveți dezvoltatori debutanți în echipa dvs.
A face acest lucru este extrem de simplu, desigur:
/// 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; ) )Acum, rescriem fragmentul anterior:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Mult mai bine, nu? Totuși, qualifypoate suna un pic dificil pentru jucătorii fără experiență Sass. Puteți furniza un alias atunci când un nume mai descriptiv, cum ar fi when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Un ultim exemplu:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )