Digamos que você precise usar um determinado seletor em vários lugares em seu código. Não é muito comum, com certeza, mas coisas acontecem. O código repetido normalmente é uma oportunidade para abstração. Abstrair valores no Sass é fácil, mas os seletores são um pouco mais complicados.
Uma maneira de fazer isso é criar seu seletor como uma variável. Aqui está um exemplo que é uma lista de seletores separados por vírgulas:
$selectors: " .module, body.alternate .module ";Então, para usar isso, você tem que interpolar a variável, assim:
#($selectors) ( background: red; )Isso também funciona com aninhamento:
.nested ( #($selectors) ( background: red; ) )Prefixando
Uma variável também pode ser apenas uma parte de um seletor, como um prefixo.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Você também pode usar o aninhamento para fazer a prefixação:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Seletores em um mapa
Talvez sua abstração se preste a uma situação de par chave / valor. Esse é um mapa em Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Você pode usá-los individualmente como:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Ou percorra-os:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Exemplos
Veja as Variáveis Pen Sass para Seletores de Chris Coyier (@chriscoyier) no CodePen.