Gebruik een Sass-variabele voor een selector - CSS-trucs

Stel dat u een bepaalde selector op meerdere plaatsen in uw code moet gebruiken. Het is zeker niet enorm gebruikelijk, maar er gebeuren dingen. Herhaalde code is doorgaans een mogelijkheid voor abstractie. Het abstraheren van waarden in Sass is eenvoudig, maar selectors is iets lastiger.

Een manier om dit te doen, is door uw selector als variabele te maken. Hier is een voorbeeld dat een door komma's gescheiden lijst met selectors is:

$selectors: " .module, body.alternate .module ";

Om dat te gebruiken, moet je de variabele als volgt interpoleren:

#($selectors) ( background: red; )

Dat werkt ook met nesten:

.nested ( #($selectors) ( background: red; ) )

Voorvoegsel

Een variabele kan ook slechts een deel van een selector zijn, zoals een prefix.

$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )

U kunt ook nesten gebruiken om voorvoegsels uit te voeren:

.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )

Selectors in een kaart

Misschien leent uw abstractie zich voor een sleutel / waarde-paar-situatie. Dat is een kaart in Sass.

$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );

U kunt ze afzonderlijk gebruiken, zoals:

#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )

Of loop ze door:

@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )

Voorbeelden

Zie de Pen Sass-variabelen voor selectoren door Chris Coyier (@chriscoyier) op CodePen.