O próximo recurso poderoso é o aninhamento. Ele permite aninhar um seletor dentro de outro para criar um código mais organizado e legível. Podemos agrupar estilos e reduzir a quantidade de código necessária.

Vamos imaginar que precisamos criar a navegação do site.

O HTML para esta navegação será o seguinte:

<nav>
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#price">Price</a>
    </li>
  </ul>
</nav>

Considerando que, além da navegação, utilizamos as mesmas tags HTML (ul, li, a) várias vezes ao longo do projeto. Para adicionar estilos especificamente a esses elementos, é necessário utilizar regras de aninhamento em CSS. Assim, o CSS pode ser estruturado da seguinte forma:

nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: aquamarine;
}

nav ul li a:hover {
  text-decoration: underline wavy;
}

Agora, veja como o Sass pode facilitar nosso trabalho. Todos esses estilos podem ser agrupados em um único bloco. O código é reescrito da seguinte forma:

nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;

  ul {
    list-style: none;
    padding-left: 0;

    li {
      display: inline-block;
      margin: 0 10px;

      a {
        text-decoration: none;
        color: aquamarine;
        
        &:hover {
          text-decoration: underline wavy;
        }
      }
    }
  }
}

É como se estivéssemos aninhando o bloco de estilo do elemento filho dentro do bloco do elemento pai. Observe que o símbolo & no seletor &:hover é utilizado para referenciar o seletor pai, neste caso, a. Esta é uma forma abreviada de escrever a:hover e facilita a escrita de seletores aninhados sem a necessidade de repetir o seletor pai várias vezes.