Oletame, et peate oma koodis kasutama kindlat valijat mitmes kohas. See pole kindlasti tohutult tavaline, kuid asju juhtub. Korduv kood on tavaliselt abstraktsiooni võimalus. Väärtuste abstraktsus Sassis on lihtne, kuid valijad on veidi keerulisemad.
Üks võimalus seda teha on luua valija muutujana. Siin on näide, mis on komadega eraldatud valijate loend:
$selectors: " .module, body.alternate .module ";Seejärel peate selle kasutamiseks muutuja interpoleerima järgmiselt:
#($selectors) ( background: red; )See töötab ka pesitsemisega:
.nested ( #($selectors) ( background: red; ) )Eesliide
Muutuja võib olla ka ainult osa valijast, näiteks eesliide.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Pesitsemist võiksite kasutada ka eesliite tegemiseks:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Valijad kaardil
Võib-olla sobib teie abstraktsioon võtme / väärtuspaari olukorda. See on Sassi kaart.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Saate neid kasutada eraldi, näiteks:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Või vaadake neid läbi:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Näited
Vaadake Chris Coyieri (@chriscoyier) CodePeni saidil Pen Sass Muutujaid valijatele.