Oletetaan, että sinun on käytettävä tiettyä valitsinta useissa paikoissa koodissasi. Se ei ole valtavan yleistä, olla varma, mutta tavaraa tapahtuu. Toistettu koodi on tyypillisesti mahdollisuus abstraktioon. Arvojen tiivistäminen Sassissa on helppoa, mutta valitsimet ovat hieman hankalampia.
Yksi tapa tehdä se on luoda valitsimesi muuttujana. Tässä on esimerkki, joka on pilkuilla erotettu luettelo valitsimista:
$selectors: " .module, body.alternate .module ";Sen jälkeen sinun on interpoloitava muuttuja seuraavasti:
#($selectors) ( background: red; )Se toimii myös pesimisen kanssa:
.nested ( #($selectors) ( background: red; ) )Etuliite
Muuttuja voi myös olla vain osa valitsinta, kuten etuliite.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Voit käyttää pesimistä myös etuliitteiden tekemiseen:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Valitsimet kartalla
Ehkä abstraktiosi soveltuu avain / arvo-paritilanteeseen. Se on kartta Sassissa.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Voit käyttää niitä erikseen, kuten:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Tai silmukka niiden läpi:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Esimerkkejä
Katso Chris Coyierin (@chriscoyier) Pen Sass -muuttujat valitsimille CodePenistä.