Angenommen, Sie müssen einen bestimmten Selektor an mehreren Stellen in Ihrem Code verwenden. Es ist zwar nicht sehr häufig, aber es passiert etwas. Wiederholter Code ist normalerweise eine Gelegenheit zur Abstraktion. Das Abstrahieren von Werten in Sass ist einfach, aber Selektoren sind etwas schwieriger.
Eine Möglichkeit besteht darin, Ihren Selektor als Variable zu erstellen. Hier ist ein Beispiel, das eine durch Kommas getrennte Liste von Selektoren ist:
$selectors: " .module, body.alternate .module ";Um dies zu verwenden, müssen Sie die Variable wie folgt interpolieren:
#($selectors) ( background: red; )Das funktioniert auch beim Verschachteln:
.nested ( #($selectors) ( background: red; ) )Präfix
Eine Variable kann wie ein Präfix auch nur ein Teil eines Selektors sein.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Sie können auch die Verschachtelung verwenden, um Präfixe zu erstellen:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selektoren in einer Karte
Vielleicht eignet sich Ihre Abstraktion für eine Schlüssel / Wert-Paar-Situation. Das ist eine Karte in Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Sie können sie einzeln verwenden wie:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Oder durchlaufen Sie sie:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Beispiele
Siehe die Pen Sass-Variablen für Selektoren von Chris Coyier (@chriscoyier) auf CodePen.