Modularizar el código CSS con Sass

  • Por
  • CSS
Cómo crear módulos de código Sass e importarlos, con lo que podemos segmentar, ordenar y orientar a componentes el código CSS, en diversos archivos, ayudando al mantenimiento.

Ha llegado el momento de hablar de los imports en el Manual de Sass. Es un punto de mucha importancia, ya que es una de las ventajas fundamentales de trabajar con preprocesadores. Sass te ofrece la posibilidad de dividir el código CSS en varios archivos, lo que es muy útil porque el código CSS suele ser muy extenso, sobre todo en sitios o aplicaciones grandes, lo que lo hace difícil de manejar.

Aunque técnicamente no es un problema disponer de un fichero muy grande, a la hora de editar el código se hace complicado y lento localizar el lugar exacto donde tienes cada estilo que quieras tocar. Por eso es muy interesante tener el código dividido en distintos ficheros, de modo que, cuando quieres modificar algo de tu sitio, sabes perfectamente dónde están esos estilos y puedes localizarlos rápidamente, ya que nuestros archivos tendrán muy poco código.

En resumen, dividir el código CSS de tu aplicación en múltiples ficheros, facilitará enormemente el mantenimiento. Por tanto, serás más productivo y la experiencia de desarrollo de tu CSS será más agradable en el día a día.

Nota: Alguien podría pensar que realmente CSS también nos ofrece esta posibilidad, gracias a los @import, y estará en lo cierto. Aunque esta misma operativa con Sass es mucho más optimizada. Esto es porque, con los @import comunes de CSS, el código reside en varios archivos distintos y el navegador tiene que ir solicitando esos archivos, uno a uno al servidor web, lo que es mucho más lento que si estuviera todo el código en el mismo fichero. En cambio, cuando desarrollas en Sass, durante el proceso de compilación del código, se hace la unión de todos los imports de tu CSS en un único fichero. Por tanto, los imports de Sass son mucho más interesantes que los imports del lado del CSS, porque una vez realizada la tarea del preprocesador, el código CSS resultante estará en un único archivo.

Cómo crear módulos scss a importar

Comenzamos por aclarar que, a continuación, vamos a llamar "módulos" a los archivos que creas para importar desde otros archivos scss.

En realidad es posible importar cualquier código scss desde otros ficheros de Sass, por lo que no necesitas hacer nada especial para crear estos archivos. Sin embargo es útil decirle a Sass qué archivos scss son módulos y qué archivos no lo son.

Nota: cuando estás usando el "watcher" del compilador "oficial" de Sass, el que te enseñamos a utilizar en el artículo sobre Cómo usar Sass, https://desarrolloweb.com/articulos/que-es-sass-usar-sass.html y estás haciendo el seguimiento de una carpeta, Sass no tiene en principio cómo distingir los archivos que son módulos y los que no. Date cuenta que los módulos sólo los has creado para que sean importados desde otras carpetas, por lo que en principio no deberían compilarse ellos solos.

En resumen, para que el compilador de Sass no compile un módulo por separado, tiene que saber qué archivo es un módulo. Para ello simplemente vamos a nombrar el módulo comenzando por un guión bajo "_".

Imagina que quieres crear un módulo con una serie de definiciones de variables. Entonces ese módulo lo podrías llamar "_variables.scss". Entonces lo podrás colocar en tu carpeta de código Sass y, como se ha identificado como un módulo, entonces no se compilará por separado. Y es lógico que lo desees así, pues las definiciones de variables por si solas no te sirven de nada en un archivo CSS.

Así pues, todos los archivos que comiencen por un "_" no generarán nuevos archivos .css, como se puede ver en la siguiente imagen. Solamente estilo.scss generará una salida en estilo.css.

Cómo importar un módulo Sass

Ahora veamos el siguiente paso, dado un módulo, queremos que se cargue en un archivo que sí se compile. Es decir, en el archivo scss principal, iremos realizando todas las importaciones de los módulos, para agrupar todos los archivos que teníamos por separado.

Esto se consigue con la sentencia @import, a continuación del nombre del módulo a importar, sin el guión bajo y sin la extensión. Por ejemplo, para importar el archivo "_variables.scss", realizaremos el siguiente código en el archivo principal, desde el que queremos importar el módulo.

@import 'variables';

Obviamente, este import debe figurar en el código scss antes que comiences a usar las variables que se están declarando. Cabe aclarar también que no solamente se usan los imports para declaraciones de variables, sino en general para poder organizar cada pieza de tu código CSS, como explicaremos en el siguiente punto.

Ejemplo de imports con Sass

Aunque es muy sencillo veamos un par de listados de código de archivos Sass para ver cómo es el trabajo de importar CSS de ficheros aparte.

Veamos primero el archivo con un código que vamos a importar. Este sería el código de "_fonts.scss", que define algunas fuentes, en variables que se han definido para usar las veces que haga falta a lo largo del código restante.

$f-normal: 16pt;
$f-pequena: 12pt;
$f-grande: 20pt;

$tipo-general: 'Trebuchet MS', 'Lucida Sans Unicode', Arial, sans-serif;
$tipo-alternativa: 'Times New Roman', serif;

Como puedes comprobar, son reglas de estilos Sass, para la declaración de variables. No hay nada que especifique que este archivo es un módulo. Recuerda que Sass lo podrá deducir por el nombre del archivo con su "_" al inicio.

Por otra parte puedes ver el código donde importamos estos valores. Este sería el listado de "estilos.css":

@import "fonts";

body {
   font-size: $f-normal;
   font-family: $tipo-general;
}

h1 {
   font-size: $f-grande;
   font-family: $tipo-alternativa;
}

Cómo organizar tus archivos de CSS

Aunque esto no tiene mucho que ver con Sass, te vamos a dar una serie de apuntes que puedes, o no, tener en cuenta como ideas para organizar los módulos de tu proyecto Sass. Primero cabe aclarar que el desarrollador es el encargado de realizar la organización que juzgue oportuna para su código. En la mayoría de los casos un poco de sentido común ayudará bastante, aunque vamos a ofrecer aquí dos consejos fundamentales que puedes aplicar para conseguir una buena organización de tu código.

Nota: existen diversas aproximaciones a arquitecturas CSS publicadas por desarrolladores de renombre, que ofrecen guías "estandarizadas" para organizar el código CSS. Una bastante conocida es ITCSS, que puede servirte de ayuda para llegar a tu propio modelo de organización del código. Si te interesa profundizar te recomendamos la lectura del artículo ITCSS. Si deseas más consejos de CSS te recomendamos los artículos Arquitecturas de CSS, los problemas y Las soluciones.

Definiciones globales

Es útil tener en archivos separados, módulos, las definiciones que usas desde otros archivos de tu CSS, como por ejemplo los colores, tipos de fuentes, tipos de márgenes, etc. Si son pocas tus definiciones, puede que con un único módulo lo soluciones, pero siempre será aconsejable tener definiciones en archivos por separado de cosas como:

  • Colores
  • Fuentes
  • Espaciados

Reset o normalize

Otro módulo que sería interesante tener al principio, cerca de tus definiciones globales, es el código de tu reset o normalize. No lo hemos dicho, pues resulta obvio, pero los imports se van colocando en el código CSS resultante en el orden en el que han sido importados. Por tanto, su orden aplica también a la regla de la cascada del CSS. Por tanto, el import a tu archivo reset debería ir al principio de todo.

Componentes

Otro gran consejo a la hora de definir tus módulos es aplicar la "componetización". Los estilos de cada pequeño componente de tu interfaz web deben colocarse en un archivo aparte.

Por ejemplo, podemos tener un módulo para definción de cosas como:

  • Botones
  • Capas modales
  • Paneles
  • Tooltips
  • Breadcrumbs (migas de pan)
  • Cabecera
  • Pie

Así, cada vez que quieras modificar cualquier pequeña parte de la interfaz de tu sitio, sabrás en qué archivo CSS están esos estilos. Encontrarás rápidamente las reglas CSS a modificar y ayudarás a otras personas que más adelante tengan que lidiar con tu código CSS.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir