Anidamiento de reglas en SASS

En este artículo abordamos un aspecto del desarrollo de estilos con SASS que es extremadamente útil. El anidamiento de reglas de estilos nos aporta dos ventajas en el desarrollo frontend. Por una parte, simplifica el código, permitiéndonos generar unas hojas de estilos scss más compactas y ligeras. En el lado más practico, permite establecer una relación visualmente más directa entre el codigo scss y el documento html con el que estamos trabajando. No se trata de una relación tipificada, sino más bien visual para el desarrollador, facilitándole su trabajo.

En este artículo vamos a ver como funciona el anidamiento de reglas en SASS, y como, además, nos permite (como apuntamos en el artículo anterior), establecer un ámbito ce vida de las variables, dándonos más control sobre nuestras hojas de estilo finales.

EL ESCENARIO

Como ya es habitual, para desarrollar el tema de este artículo vamos a desplegar un escenario sobre el que trabajar. Vamos a contar con un documento HTML y desarrollaremos un archivo scss que, posteriormente, transpilaremos a css. El documento que nos permitirá ver como opera esto es index.html. Su listado es muy simple, cómo ves a continuación:

Como ves, es una estructura muy simple. Una lista desordenada, unos párrafos y dos tipos de titulares, uno global para la página, y otro para cada párrafo. En este listado he recortado el contenido de los párrafos para que el código se capte fácilmente a primer golpe de vista. En el archivo descargable, al final del artículo, el html está completo.

EL ARCHIVO SCSS

El archivo index.html llama, como ves, a una hoja de estilos que aún no tenemos, por lo que, al cargarla en el navegador, se ve todo el contenido en bruto, sin ningún estilo aplicado. Ahora vamos a escribir, en notación scss, las reglas de estilos. Vamos a escribirlo anidando los estilos, para que veas el resultado tan compacto, pero tan legible, que se produce. El archivo, dentro del directorio /scss, se llama styles.scss:

Como ves, el código SASS aparece lleno de comentartios. Como son comentarios monolínea, no aparecerán cuando transpilemos a css. No obstante, en el scss te resultan muy útiles para entender lo que hemos hecho.

TRANSPILANDO

Ahora llega el momento de hacer la transpilación. Aunque hay varias maneras de hacer este proceso, nosotros vamos a seguir empleando gulp, como hemos venido haciendo hasta ahora. El resultado es un código css, llamado styles.css, cuyo listado es el siguiente:

Como ves, el lenguage CSS no admite anidamientos. Lo que hace, al transpilar, es sustituir las reglas anidadas de scss por selectores compuestos de css. Ahora, si cargas el documento html verás que se carga la hoja de estilos CSS, y funciona perfectamente.

ÁMBITO DE VIDA DE VARIABLES

Cuando creamos un conjunto de reglas anidadas, o simplemente, una regla scss, realmente estamos creando un bloque de código. Esto significa que se está definiendo, de forma automática, un ámbito de vida de las variables. Por lo tanto, una variable que se declare fuera de cualquier regla (como hemos hecho hasta ahora), estará disponible para ser invocada dentro de cualquier regla (anidada o no dentro de otra). Sin embargo, una variable declarada dentro de una regla, sólo estará disponible para esa regla, y para las que estén anidadas dentro de ella, pero no estará disponible para otras reglas de estilos declaradas en el resto del scss. Si tratamos de usar esa variable en otra regla externa a aquella donde declaramos la variable, se producirá un error de transpilación.

Vamos a verlo más claro con un ejemplo. En este caso partimos de un archivo SCSS muy simple, llamado ambitos.scss:

Antes de nada, observa la documentación del código, para ver lo que tratamos de hacer. Cuando intentes transpilar este código SCSS no será posible. El gestor de tareas gulp aborta la ejecución, mostrando, en la consola, un mensaje de error similar al que ves a continuación:

Observa la línea resaltada, que nos indica que hemos tratado de usar una variable no declarada. Realmente, no es que no esté declarada, sino que está declarada en un ámbito ajeno a aquel donde intentamos usarla, lo que, a los efectos, es exactamente lo mismo.

CUIDADO CON LA FORMA DE ANIDAR ESTILOS

Este es un punto muy importante. En multitud de ocasiones necesitamos anidar los estilos de un selector (un id, una clase, o una etiqueta), dentro de otro y, según como lo hagamos, el resultado que obtengamos puede ser completamente diferente al esperado. Te pondré un ejemplo, muy simple para centrarnos en esta cuestión. Suponte que tienes un código SASS como el siguiente:

Esto se transpila a CSS de la siguiente forma:

Si estás familiarizado con las sutilezas de CSS sabes que esto hace que el contenido de los párrafos aparezca en rojo, y el contenido de aquellos elementos que tengan la clase resaltado Y ESTÉN dentro de los párrafos aparezca en letra negrita. Sin embargo, si creas una etiqueta como la siguiente:

<p class='resaltado'>Esto es rojo, pero no negrita</p>

encontrarás que el estilo bold no se ha aplicado. Esto se debe a que, aunque el párrafo tenga la clase resaltado, no hay, dentro del párrafo, ningún elemento que tenga esta clase, por lo que todo el contenido te aparecerá sin negrita.

Sin embargo, ahora observa este SASS:

Observa, en la línea resaltada, como hemos añadido el comodín &. Esto se transpila a CSS así:

En este caso, le estamos diciendo al CSS que, además de poner el contenido de los párrafos en rojo, le añada el estilo bold a aquellos párrafos que tengan la clase resaltado. Observa, en la linea destacada (la 4), la sutil diferencia de que, esta vez, no hay un espacio en blanco separando p de .resaltado.

La diferencia (también bastante sutil) en SASS la ves en las líneas destacadas de ambos ejemplos. En el primero hemos anidado el selector .resaltado dentro del selector p. En el segundo no sólo lo hemos anidado sino que, con el uso del comodín & le hemos indicado al transpilador la jerarquía del selector .resaltado respecto al selector p.

Ten en cuenta estas sutilezas, porque un detalle así cambia, como ves, completamente el funcionamiento de tus hojas de estilos.

CONCLUYENDO

En este artículo hemos aprendido como podemos anidar reglas css en un archivo scss, formando un árbol jerárquico de reglas. Estas pueden incuir distintos selectores, o bien pseudo clases o pseudo elementos que se refieran a la clase donde estamos anidando, mediante el comodín &. También hemos aprendido como declarar variables generales para todo el archivo o, por el contrario, declararlas con un ámbito restringido, de modo que no sean visibles fuera del mismo. Como es habitual, los códigos de este artículo puedes descargarlos en este enlace para experimentar con ellos.

En el próximo artículo veremos como podemos hacer más claro y legible el código SCSS, fragmentándolo en varios archivos, y dando lugar a un único archivo CSS final.

   

Deja un comentario