Supongamos que necesita usar un selector determinado en varios lugares de su código. No es tremendamente común, sin duda, pero suceden cosas. El código repetido suele ser una oportunidad para la abstracción. Resumir valores en Sass es fácil, pero los selectores son un poco más complicados.
Una forma de hacerlo es crear su selector como una variable. Aquí hay un ejemplo que es una lista de selectores separados por comas:
$selectors: " .module, body.alternate .module ";Luego, para usar eso, debes interpolar la variable, así:
#($selectors) ( background: red; )Eso también funciona con la anidación:
.nested ( #($selectors) ( background: red; ) )Prefijo
Una variable también puede ser solo una parte de un selector, como un prefijo.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )También podría usar la anidación para hacer prefijos:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selectores en un mapa
Quizás su abstracción se preste a una situación de par clave / valor. Eso es un mapa en Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Puede usarlos individualmente como:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )O recorrelos:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Ejemplos
Consulte las variables de Pen Sass para selectores de Chris Coyier (@chriscoyier) en CodePen.