Si at du må bruke en bestemt velger flere steder i koden din. Det er ikke veldig vanlig, for å være sikker, men ting skjer. Gjentatt kode er vanligvis en mulighet for abstraksjon. Å abstrahere verdier i Sass er enkelt, men velgerne er litt vanskeligere.
En måte å gjøre det på er å lage velgeren din som en variabel. Her er et eksempel som er en kommaseparert liste over velgere:
$selectors: " .module, body.alternate .module ";For å bruke det, må du interpolere variabelen, slik:
#($selectors) ( background: red; )Det fungerer også med hekking:
.nested ( #($selectors) ( background: red; ) )Prefiksering
En variabel kan også bare være en del av en velger, som et prefiks.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Du kan bruke hekking til å gjøre prefiks også:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Velgere på et kart
Kanskje egner din abstraksjon seg til en nøkkel / verdipar-situasjon. Det er et kart i Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Du kan bruke dem individuelt som:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Eller løkke gjennom dem:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Eksempler
Se Pen Sass Variables for Selectors av Chris Coyier (@chriscoyier) på CodePen.