Utiliser une variable Sass pour un sélecteur - Astuces CSS

Supposons que vous deviez utiliser un certain sélecteur à plusieurs endroits dans votre code. Ce n'est pas très courant, certes, mais des choses arrivent. Le code répété est généralement une opportunité d'abstraction. Abstraction des valeurs dans Sass est facile, mais les sélecteurs sont légèrement plus compliqués.

Une façon de le faire est de créer votre sélecteur en tant que variable. Voici un exemple qui est une liste de sélecteurs séparés par des virgules:

$selectors: " .module, body.alternate .module ";

Ensuite, pour l'utiliser, vous devez interpoler la variable, comme ceci:

#($selectors) ( background: red; )

Cela fonctionne également avec l'imbrication:

.nested ( #($selectors) ( background: red; ) )

Préfixage

Une variable peut également n'être qu'une partie d'un sélecteur, comme un préfixe.

$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )

Vous pouvez également utiliser l'imbrication pour faire des préfixes:

.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )

Sélecteurs dans une carte

Peut-être que votre abstraction se prête à une situation de paire clé / valeur. C'est une carte à Sass.

$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );

Vous pouvez les utiliser individuellement comme:

#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )

Ou parcourez-les:

@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )

Exemples

Voir les variables Pen Sass pour les sélecteurs par Chris Coyier (@chriscoyier) sur CodePen.