Mixin, aby zakwalifikować selektora - CSS-Tricks

Anonim

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 qualifymoż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; ) )