Použijte proměnnou Sass pro selektor - Triky CSS

Anonim

Ř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.