Za izbirnik uporabite spremenljivko Sass - CSS-triki

Recimo, da morate uporabiti določen izbirnik na več mestih v kodi. Gotovo ni izredno pogosto, vendar se stvari zgodijo. Ponavljajoča se koda je običajno priložnost za abstrakcijo. Povzeti vrednosti v Sass je enostavno, a izbirniki so nekoliko bolj zapleteni.

Eden od načinov je, da izbirnik ustvarite kot spremenljivko. Tu je primer seznama izbirnikov, ločenih z vejicami:

$selectors: " .module, body.alternate .module ";

Potem, da to uporabite, morate spremenljivko interpolirati, takole:

#($selectors) ( background: red; )

To deluje tudi z gnezdenjem:

.nested ( #($selectors) ( background: red; ) )

Predpona

Spremenljivka je lahko tudi le del izbirnika, na primer predpona.

$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )

Z gnezdenjem lahko uporabite tudi predpono:

.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )

Izbirniki na zemljevidu

Morda je vaša abstrakcija primerna za par par ključ / vrednost. To je zemljevid v Sassu.

$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );

Uporabite jih lahko posamezno, kot so:

#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )

Ali pa skozi njih:

@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )

Primeri

Oglejte si spremenljivke Pen Sass za izbirnike Chrisa Coyierja (@chriscoyier) na CodePen.