Il n'existe pas de moyen simple de qualifier un sélecteur à partir de son jeu de règles associé. Par qualificatif, je veux dire ajouter un nom d'élément (par exemple a) à une classe (par exemple .btn) pour qu'un ensemble de règles soit spécifique à une combinaison d'un sélecteur d'élément et d'un sélecteur de classe (par exemple a.btn).
À ce jour, la meilleure (et jusqu'à présent la seule manière valable) de le faire est la suivante:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, certainement pas vraiment élégant, n'est-ce pas? Idéalement, vous voudrez peut-être cacher ce genre de syntaxe horrible derrière un mixin afin de conserver une API propre et conviviale, surtout si vous avez des développeurs débutants dans votre équipe.
Le faire est bien sûr extrêmement simple:
/// 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; ) )Maintenant, réécrivez notre extrait de code précédent:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Beaucoup mieux, non? Pourtant, cela qualifypeut sembler un peu délicat pour les bricoleurs Sass inexpérimentés. Vous pouvez fournir un alias lorsqu'un nom plus descriptif, tel que when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Un dernier exemple:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )