Pieņemsim, ka jums ir jāizmanto noteikts atlasītājs vairākās koda vietās. Tas nav ārkārtīgi izplatīts, lai pārliecinātos, bet lietas notiek. Atkārtots kods parasti ir abstrakcijas iespēja. Vērtību abstrakcija Sass ir vienkārša, taču atlasītāji ir nedaudz sarežģītāki.
Viens veids, kā to izdarīt, ir izveidot atlasītāju kā mainīgo. Šis piemērs ir komatu atdalīts atlasītāju saraksts:
$selectors: " .module, body.alternate .module ";Pēc tam, lai to izmantotu, mainīgais ir jāinterpolē šādi:
#($selectors) ( background: red; )Tas darbojas arī ar ligzdošanu:
.nested ( #($selectors) ( background: red; ) )Prefiksēšana
Mainīgais var būt arī tikai daļa no atlasītāja, piemēram, prefikss.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Jūs varētu izmantot ligzdošanu, lai veiktu arī prefiksu:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Atlasītāji kartē
Varbūt jūsu abstrakcija ir piemērota atslēgas / vērtības pāra situācijai. Tā ir Sass karte.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Varat tos izmantot atsevišķi, piemēram:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Vai arī cilpa caur tām:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Piemēri
Skatiet Krisa Koijera (@chriscoyier) Pen Sass mainīgos lielumus selektoriem vietnē CodePen.