Recimo da trebate koristiti određeni selektor na više mjesta u kodu. Nije sigurno uobičajeno, ali stvari se događaju. Ponovljeni kôd obično je prilika za apstrakciju. Apstrahiranje vrijednosti u Sassu jednostavno je, ali selektori su malo složeniji.
Jedan od načina to je stvoriti svoj selektor kao varijablu. Evo primjera koji je popis selektora odvojen zarezima:
$selectors: " .module, body.alternate .module ";Zatim da biste to koristili, morate interpolirati varijablu, ovako:
#($selectors) ( background: red; )To funkcionira i s gniježđenjem:
.nested ( #($selectors) ( background: red; ) )Prefiks
Varijabla također može biti samo dio selektora, poput prefiksa.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Možete koristiti gniježđenje i za prefiksiranje:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selektori na karti
Možda se vaša apstrakcija prilagodi situaciji par ključ / vrijednost. To je karta u Sassu.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Možete ih koristiti pojedinačno poput:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Ili prođite kroz njih:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Primjeri
Pogledajte varijable Pen Sass za selektore Chrisa Coyiera (@chriscoyier) na CodePenu.