HTML como lenguaje requiere una organización de las etiquetas en forma de árbol. Gracias a ello, en la lectura del código HTML somos capaces rápidamente de saber qué cosas están dentro de otras.

Sin embargo, a la hora de escribir CSS observarás que todo el código es bastante más plano. En principio no es un problema, pero gracias a la anidación de selectores en el código de Sass somos capaces de escribir menos y conseguir un código que luego será más sencillo de leer por humanos y más fácil de mantener.

Las ventajas de la anidación, que explicaremos a continuación, son tales que el estándar de CSS ya las tiene previsto incluir. Pero como ocurría con las variables, el soporte a día de hoy es prácticamente nulo, así que debemos usar algún tipo de herramienta que convierta el código a algo entendible por los navegadores.

Por qué es útil anidar el código CSS

Como hemos aprendido a lo largo del Manual de Sass, las ventajas de los recursos que el preprocesador nos ofrece, son casi siempre enfocadas a una menor escritura de código y un mejor mantenimiento. Con anidación en el CSS tendrás que escribir menos, pues tendremos selectores que son menos largos y menos repetitivos.

Esto lo podemos ver con un ejemplo más claramente.

Imagina que quieres definir un tipo de caja como "destacada". Ese tipo de caja puede tener encabezados y además dentro podría tener enlaces. Para definir todas esas cosas podrías escribir un HTML como este.

<div class="cajadestacada">
  <header>Este es el encabezado <a href="#">Enlace encabezado</a> </header>
  <p>Lorem ipsum...</p>
</div>

Ahora, para aplicar estilos a este elemento, podríamos usar un código estándar como este:

.cajadestacada {
  background-color: red;
}

.cajadestacada header {
  background-color: black;
  color: #fff;
}

.cajadestacada header a {
  color: #ff6;
}

Con la calificación de código "plano", lo que queremos hacer notar es que, cada vez que queremos definir un estilo para algo que va dentro del elemento de clase "cajadestacada", tenemos que escribir el selector, y luego los selectores de los elementos a los que queremos llegar, repitiendo constantemente eso de ".cajadestacada".

Quizás tampoco es un problema muy crítico, pero los preprocesadores nos ayudan a escribir menos código y conseguir ser más rápidos. No solamente la primera vez que se codificó, sino todas las veces que vamos a mantener este CSS.

Cómo anidar selectores en Sass

Como sabes, vamos a explicar la sintaxis SCSS de Sass, que nos permite como alternativa una sintaxis muy próxima a la sintaxis del propio CSS.

A continuación veamos un código donde anidamos los selectores. Esa anidación es similar a la que tenemos en el HTML, donde unas etiquetas están dentro de otras.

.cajadestacada {
  background-color: red;

  header {
    background-color: black;
    color: #fff;  

    a {
      color: #ff6;
    }
  }
}

Ahora nuestro código es menos plano y concuerda más con la propia estructura del HTML que estamos estilizando. Además que hemos podido escribir menos código.

El resultado, una vez compilado, es parecido al que te podrías imaginar, y que hemos colocado como ejemplo al principio de este artículo.

.cajadestacada {
  background-color: red; }
  .cajadestacada header {
    background-color: black;
    color: #fff; }
    .cajadestacada header a {
      color: #ff6; }

Anidación y buenas prácticas CSS / Sass

Debemos de ser cuidadosos con la anidación y no usarla alocadamente. Esto es algo importante en el desarrollo CSS en general, no solamente con los preprocesadores.

Usar selectores complejos, en los que se apliquen varios niveles de anidación puede llegar a ser contraproducente, ya que estamos siendo muy específicos con ciertos estilos, que llegarán a aplicarse en situaciones muy concretas.

En lugar de anidar a veces es preferible por ejemplo usar clases. Lo bueno de la clase es que la puedes reutilizar todas las veces que desees, a lo largo de cualquier parte de tu HTML, independientemente de la estructura de tu HTML.

La regla, no escrita, es que no debes de definir estilos CSS a selectores que aniden más de tres elementos.

Referencia al selector padre

A la hora de producir código anidado en Sass hay otra técnica que se usa bastante, que es la referencia al selector padre, usando el caracter "&".

Esto nos sirve para que, al definir código anidado, podamos continuar en el uso del selector sobre el que estamos trabajando, a fin de no repetirlo de nuevo. Seguro que con un ejemplo conseguimos entenderlo bien.

Este código de CSS, hace uso del selector padre para definir un estilo para el enlace cuando está en estado "hover".

a.dinamico {
  color: red;
  &:hover {
    background-color: #ff6;
  }
}

Simplemente, Sass, cuando vea el caracter "&" entenderá que tiene que sustituirlo por el selector padre de esta anidación. Por tanto, el anterior código compilará a este CSS estándar.

a.dinamico {
  color: red; }
  a.dinamico:hover {
    background-color: #ff6; }

Otro uso de este operador para referirse al selector padre es cuando estás usando una nomenclatura como "BEM". En estos casos haces nombres de clases como "form--black" o "form__submit", o incluso cosas más complejas como "form__submit--desactivado".

Para poder definir todos los estilos de la clase "form" de una vez y usando anidación, podríamos escribir algo como esto.

.form {
  margin: 10px;
  padding: 15px;
  &--black {
    color: #fff;
    background-color: #000;
  }
  &__submit {
    color: red;
    &--desactivado {
      color: #999;
    }
  }
}

Que daría como resultado el siguiente CSS estándar compilado.

.form {
  margin: 10px;
  padding: 15px; }
  .form--black {
    color: #fff;
    background-color: #000; }
  .form__submit {
    color: red; }
    .form__submit--desactivado {
      color: #999; }

Propiedades anidadas

Otra utilidad de la anidación en Sass es cuando tenemos propiedades que comparten una misma raíz, como "font-size", "font-family", etc. Podremos anidarlas de la siguiente forma.

h2 {
  color: #666;
  font: {
     family: verdana;
     weight: bold;
     size: 0.9em;
  }
}

Esto compilará al siguiente código CSS.

h2 {
  color: #666;
  font-family: verdana;
  font-weight: bold;
  font-size: 0.9em; }

Hemos aprendido muchas utilidades de anidación de CSS que estoy seguro que usarás mucho en tu día a día con Sass. Espero que hayas disfrutado pensando en todo el código que te vas a ahorrar!