Anta att du måste använda en viss väljare på flera platser i din kod. Det är inte riktigt vanligt, för att vara säker, men saker händer. Upprepad kod är vanligtvis ett tillfälle för abstraktion. Att abstrakta värden i Sass är enkelt, men väljare är lite knepigare.
Ett sätt att göra det är att skapa din väljare som en variabel. Här är ett exempel som är en kommaseparerad lista med väljare:
$selectors: " .module, body.alternate .module ";För att använda det måste du interpolera variabeln så här:
#($selectors) ( background: red; )Det fungerar också med häckande:
.nested ( #($selectors) ( background: red; ) )Prefixing
En variabel kan också bara vara en del av en väljare, som ett prefix.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Du kan också använda häckande för att göra prefix:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Väljare på en karta
Kanske lämpar sig din abstraktion för en nyckel / värdeparssituation. Det är en karta i Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Du kan använda dem individuellt som:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Eller slinga igenom dem:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Exempel
Se Pen Sass-variabler för väljare av Chris Coyier (@chriscoyier) på CodePen.