Řekněme, že v kódu musíte použít určitý selektor na více místech. Není to nijak zvlášť běžné, ale věci se stávají. Opakovaný kód je obvykle příležitostí pro abstrakci. Abstrahování hodnot v Sassu je snadné, ale selektory jsou o něco složitější.
Jedním ze způsobů, jak to udělat, je vytvořit selektor jako proměnnou. Zde je příklad selektoru oddělený seznam selektorů:
$selectors: " .module, body.alternate .module ";
Chcete-li to použít, musíte proměnnou interpolovat takto:
#($selectors) ( background: red; )
To funguje také s vnořením:
.nested ( #($selectors) ( background: red; ) )
Předpona
Proměnná může být také pouze částí selektoru, například předponou.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )
Můžete také použít vnoření k prefixům:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )
Selektory na mapě
Možná se vaše abstrakce hodí k situaci s párem klíč / hodnota. To je mapa v Sassu.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );
Můžete je použít jednotlivě jako:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )
Nebo je projděte smyčkou:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )
Příklady
Podívejte se na Proměnné pera Sass pro selektory od Chrisa Coyiera (@chriscoyier) na CodePen.