La siguiente característica poderosa es la anidación. Permite anidar un selector dentro de otro para crear un código más organizado y legible. Podemos agrupar estilos y reducir la cantidad de código que necesitamos escribir.

Imaginemos que necesitamos crear la navegación del sitio web.

El html para esta navegación se verá de la siguiente manera:

<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, además de la navegación, se utilizan las mismas etiquetas html (ul, li, a) varias veces a lo largo del proyecto. Para agregar estilos específicamente a estos elementos, es necesario utilizar reglas de anidamiento en css. Así, el css puede verse de la siguiente manera:

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;
}

Ahora, veamos cómo sass puede facilitar nuestro trabajo. Agruparemos todos estos estilos en un solo bloque. El código se reescribe de la siguiente manera:

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;
        }
      }
    }
  }
}

Es como si estuviéramos anidando el bloque de estilos del hijo dentro del bloque del padre. Preste atención a que el símbolo & en el selector &:hover se utiliza para hacer referencia al selector padre, en este caso, a. Esta es una forma abreviada de escribir a:hover y facilita la escritura de selectores anidados sin repetir el selector padre varias veces.