Lo que los preprocesadores nos ofrecen, 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
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.
