Supponi di dover utilizzare un determinato selettore in più punti del codice. Non è tremendamente comune, certo, ma le cose accadono. Il codice ripetuto è in genere un'opportunità per l'astrazione. L'astrazione dei valori in Sass è facile, ma i selettori sono leggermente più complicati.
Un modo per farlo è creare il selettore come variabile. Ecco un esempio che è un elenco separato da virgole di selettori:
$selectors: " .module, body.alternate .module ";Quindi per usarlo, devi interpolare la variabile, in questo modo:
#($selectors) ( background: red; )Funziona anche con l'annidamento:
.nested ( #($selectors) ( background: red; ) )Prefisso
Una variabile può anche essere solo una parte di un selettore, come un prefisso.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Puoi usare l'annidamento anche per eseguire il prefisso:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selettori in una mappa
Forse la tua astrazione si presta a una situazione di coppia chiave / valore. Questa è una mappa in Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Puoi usarli individualmente come:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Oppure fai un ciclo attraverso di loro:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Esempi
Vedi le variabili Pen Sass per i selettori di Chris Coyier (@chriscoyier) su CodePen.