Tarkime, kad reikia naudoti tam tikrą parinkiklį keliose kodo vietose. Be abejo, tai nėra nepaprastai įprasta, tačiau visko pasitaiko. Pakartotinis kodas paprastai yra abstrakcijos galimybė. „Sass“ vertes lengva abstrakcionuoti, tačiau selektoriai yra šiek tiek sudėtingesni.
Vienas iš būdų tai padaryti yra sukurti pasirinkiklį kaip kintamąjį. Štai pavyzdys, kuris yra kableliais atskirtas selektorių sąrašas:
$selectors: " .module, body.alternate .module ";Tada norėdami tai naudoti, turite interpoluoti kintamąjį taip:
#($selectors) ( background: red; )Tai tinka ir lizdams:
.nested ( #($selectors) ( background: red; ) )Priešdėlis
Kintamasis taip pat gali būti tik pasirinkiklio dalis, pavyzdžiui, priešdėlis.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Taip pat galite naudoti lizdą, kad atliktumėte priešdėlį:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selektoriai žemėlapyje
Galbūt jūsų abstrakcija tinka raktų / vertybių poros situacijai. Tai Sasso žemėlapis.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Galite juos naudoti atskirai, pavyzdžiui:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Arba eikite per juos:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Pavyzdžiai
Žr. Chriso Coyierio (@chriscoyier) „Pen Sass“ kintamuosius selektoriams „CodePen“.