Sig, at du skal bruge en bestemt vælger flere steder i din kode. Det er bestemt ikke utroligt almindeligt, men der sker ting. Gentagen kode er typisk en mulighed for abstraktion. At abstrakte værdier i Sass er let, men vælgerne er lidt vanskeligere.
En måde at gøre det på er at oprette din vælger som en variabel. Her er et eksempel, der er en kommasepareret liste over vælgere:
$selectors: " .module, body.alternate .module ";For at bruge det skal du interpolere variablen på denne måde:
#($selectors) ( background: red; )Det fungerer også med indlejring:
.nested ( #($selectors) ( background: red; ) )Præfiksering
En variabel kan også kun være en del af en vælger, som et præfiks.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Du kan også bruge indlejring til at foretage præfikser:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Vælgere på et kort
Måske egner din abstraktion sig til en nøgle / værdipar-situation. Det er et kort i Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Du kan bruge dem individuelt som:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Eller løb gennem dem:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Eksempler
Se Pen Sass-variabler for vælgere af Chris Coyier (@chriscoyier) på CodePen.