Nie ma łatwego sposobu zakwalifikowania selektora z powiązanego zestawu reguł. Przez kwalifikowanie rozumiem dołączenie nazwy elementu (np. a
) Do klasy (np. .btn
), Tak aby zestaw reguł był specyficzny dla kombinacji selektora elementów i selektora klasy (np. a.btn
).
Na dzień dzisiejszy najlepszym (i jak dotąd jedynym ważnym sposobem) na to jest:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )
Wow, zdecydowanie niezbyt eleganckie, prawda? Idealnie byłoby, gdybyś chciał ukryć ten rodzaj przerażającej składni za mikserem, aby zachować czysty i przyjazny interfejs API, zwłaszcza jeśli masz początkujących programistów w swoim zespole.
Oczywiście jest to niezwykle proste:
/// 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; ) )
Teraz przepisujemy nasz poprzedni fragment:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )
Dużo lepiej, prawda? Mimo to qualify
może wydawać się nieco skomplikowane dla niedoświadczonych majsterkowiczów Sass. Możesz podać alias, gdy nazwa jest bardziej opisowa, na przykład when-is
.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )
Ostatni przykład:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )