Spuneți că trebuie să utilizați un anumit selector în mai multe locuri din codul dvs. Desigur, nu este extrem de obișnuit, dar se întâmplă lucruri. Codul repetat este de obicei o oportunitate pentru abstractizare. Abstracția valorilor în Sass este ușoară, dar selectoarele sunt puțin mai complicate.
O modalitate de a face acest lucru este să vă creați selectorul ca variabilă. Iată un exemplu care este o listă de selectoare separate prin virgulă:
$selectors: " .module, body.alternate .module ";Apoi, pentru a utiliza acest lucru, trebuie să interpolați variabila, astfel:
#($selectors) ( background: red; )Acest lucru funcționează și cu cuibărirea:
.nested ( #($selectors) ( background: red; ) )Prefixare
O variabilă poate fi, de asemenea, doar o parte a unui selector, ca un prefix.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Ați putea folosi cuibărirea pentru a face și prefixarea:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selectoare într-o hartă
Poate că abstractizarea dvs. se pretează la o situație de pereche cheie / valoare. E o hartă în Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Le puteți utiliza individual, cum ar fi:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Sau treceți prin ele:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Exemple
Vedeți Variabilele Pen Sass pentru selectoare de Chris Coyier (@chriscoyier) pe CodePen.