Importando ficheros. La regla @import.

Cuando nuestras hojas de estilos empiezan a crecer conforme a las necesidades de nuestros proyectos, tener un único fichero scss puede llegar a ser engorroso. Siempre es mucho más práctico, a efectos de optimización, depuración y organización, tener varios ficheros, cada uno con, digámoslo así, «lo que le corresponda». Por ejemplo, podemos tener un archivo de tipo scss donde se declaren todas las variables que se emplearán en nuestros archivos SASS, y luego importarlo desde aquellos dónde se definan las reglas de estilo y se vayan, por tanto, a emplear dichas variables.

En artículos posteriores, cuando tratemos temas como los mixins, aprenderemos a sacar también estos elementos a archivos externos.

Tener el código así organizado nos ayudará cuando trabajemos con proyectos grandes. Evidentemente, en una página sencilla, con pocas reglas CSS, puede parecer, en principio, «matar moscas a cañonazos». Sin embargo, en este artículo usaremos códigos breves, porque la finalidad del mismo es meramente didáctica, y trabajar con listados cortos, que se puedan analizar al primer golpe de vista, nos permite que los árboles no nos impidan ver el bosque. Vamos a ello.

EL ESCENARIO

Como es habitual, tenemos un fichero HTML, que carga una hoja de estilos, nuestro transpilador gulp, y los archivos SASS. El fichero HTML y el gestor de tareas no tienen nada nuevo, así que vamos a centrarnos en los archivos SASS. En primer lugar, tenemos un archivo, donde se declaran las variables, al que hemos llamado variables.scss:

Después tenemos el archivo donde se definen las reglas, llamado styles.scss:

Observa las líneas resaltadas. al principio del listado. El archivo styles.scss es el archivo principal de reglas de estilos. Empezamos importando el archivo «auxiliar» variables.scss. Veamos qué ocurre. Cuando gulp hace la transpilación, como le hemos indicado que transpile todos los archivos con extenxión .scss que encuentre en el directorio scss/, en el directorio css/ se generan dos archivos. Uno de ellos se llama styles.css, y contiene todas las reglas CSS correctamente transpiladas. El otro se llama variables.css y, como la declaración de variables de scss no se transpila a css, está vacío. Nos está creando un archivo css que no tiene contenido y que no queremos para nada.

Existe una forma de evitar esto, optimizando el resultado. Se trata de preceder el nombre del archivo auxiliar con un guion bajo. Así, variables.scss pasa a llamarse _variables.scss. Por supuesto, en el archivo principal también tenemos que modificar el nombre del archivo que importamos. Así, sustituimos la siguiente línea:

@import "variables.scss";

por

@import "_variables.scss";

De esta forma, gulp (o el transpilador que usemos, si a eso vamos), reconoce que los archivos cuyo nombre empieza con guión bajo (_) son auxiliares, que son importados en uno o más archivos principales, y no intenta transpilarlos. Si ahora realizamos la transpilación, en el directorio css/ sólo encontraremos (en este ejemplo) styles.css.

IMPORTANDO VARIOS ARCHIVOS

Cómo veremos en posteriores artículos, es muy probable que en un archivo scss de definición de reglas de estilos (un archivo principal), tengas que importar dos o más archivos auxiliares. Esto puedes hacerlo de dos formas:

@import "_archivo_auxiliar_1.scss";
@import "_archivo_auxiliar_2.scss";

o bien

@import "_archivo_auxiliar_1.scss", "_archivo_auxiliar_2.scss";

Elegir una u otra es una mera cuestión de criterio personal. Yo soy más partidario de hacerlo de la primera forma porque, si tengo que quitar un archivo auxiliar, por ejemplo, me limito a eliminar la línea entera donde se importa, y, a mi juicio, queda más claro a la vista.

ATENCIÓN. En este ejemplo hemos hecho la importación del archivo auxiliar (el de las variables) al principio de nuestro archivo principal scss. Esto se debe a que las variables se emplean desde el principio del código y, prácticamente, a lo largo de la totalidad del mismo. Sin embargo, esto no es una regla fija. Si tenemos un archivo auxiliar que se vaya a usar, por ejemplo, dentro del ámbito de una regla anidada, podemos importarlo en ese punto. En sucesivos artículos veremos ejemplos donde se hacen importaciones de archivos auxiliares en distintos puntos del archivo principal.
TERMINOLOGÍA. Cuando se importan archivos auxiliares precedidos de un guión bajo para que la transpilación genere un sólo CSS a partir del archivo principal, se usa el término partials para referirnos a los archivos auxiliares.

CONCLUYENDO

En este artículo hemos aprendido una de las técnicas más relevantes que nos ofrece SASS a la hora de organizar nuestras hojas de estilos. Tienes los códigos finales del artículo en este enlace. Como te he comentado anteriormente, cuando estudiemos otros aspectos de SASS aprenderemos a ampliar el uso del desacoplamiento de archivos scss, profesionalizando aún más nuestro trabajo.

   

Deja un comentario