Regras aninhadas no Sass

Como funciona

Imagine que você queira estilizar uma lista e seus itens. Em CSS, isso poderia ser feito assim:

ul.minha-lista {
  list-style-type: none;
  background-color: gray;
}

ul.minha-lista li {
  margin: 0;
  padding: 0;
}

No Sass, é possível aninhar a segunda regra dentro da primeira, porque os primeiros seletores da segunda regra são os mesmos seletores da primeira. Veja abaixo como ficaria:

ul.minha-lista {
  list-style-type: none;
  background-color: gray;

  li {
    margin: 0;
    padding: 0;
  }
}

ul.minha-lista {
  list-style-type: none;
  background-color: gray; }
  ul.minha-lista li {
    margin: 0;
    padding: 0; }

Perceba como o trecho em Sass reduz o uso de seletores pais (no caso, o ul.minha-lista, que foi especificado apenas uma vez no Sass). Se o seletor pai mudar, será preciso mudá-lo em um único lugar. Veja também que o aninhamento torna a hierarquia dos seletores mais clara. Essas vantagens tornam o estilo mais simples de entender e manter.

Nesse exemplo, a diferença não foi tão grande. Mas, no seu dia-a-dia, você vai lidar com vários arquivos com muito mais regras e seletores, então a diferença será bem maior e os benefícios também.

Referenciando seletores pais

Como você pode ver nos últimos exemplos, quando há aninhamento de regras, o seletor pai é inserido no início. Porém, você pode controlar onde ele será inserido usando o &. No caso de pseudo-classes e pseudo-elementos, é obrigatório especificar o seletor pai mesmo quando a intenção é inseri-lo no início. Exemplo:

input {
  form & {
    font-family: Arial;
  }
  &:hover {
    border-color: black;
  }
}

form input {
  font-family: Arial; }
input:hover {
  border-color: black; }

O seletor pai também pode ser seguido por um sufixo, ou seja, ele pode ser apenas parte do nome do seletor. Porém, nesse caso, ele precisa estar no início do nome do seletor:

.big {
  &-button {
    font-size: 1.5em;
  }
}

.big-button {
  font-size: 1.5em; }