Cómo construir un sistema de plantillas con CSS y SASS para tu aplicación web

Un problema habitual de los diseñadores web es definir diferentes diseños o temas (tipografía, colores, tamaños) para que el usuario elija aquel que le resulte más confortable. El método tradicional consiste en crear un fichero CSS con todos los estilos para un tema y luego replicarlo a cada uno de los otros temas. Esto, que a priori puede ser la solución más rápida, a la larga supondrá graves problemas de mantenimiento, ya que un simple cambio como añadir algo nuevo a algún botón o cambiar el color del tema, puede resultar tedioso y llevarnos a cometer errores como olvidar actualizar uno de los temas.
Como nosotros somos programadores y nos gusta tratar de hacer las cosas bien, vamos a seguir otro enfoque usando SASS.

Nota: Lo bueno de SASS es que es totalmente compatible con código CSS estándar, así que si no conoces SASS, puedes empezar usando sólo las variables y los imports (que es lo que veremos aquí) y luego ir aprendiendo a añadir bucles o condiciones. Te recomiendo que aprendas a usarlo, porque simplificará enormemente tu código CSS y es muy sencillo de aprender. Puedes pasarte por este manual en español.

Ejemplo base en CSS

Supongamos que hemos creado una página en la que queremos tener varios temas con sus respectivos estilos para los títulos h2 y para dos tipos de botones: primario y secundario. El código en CSS sería:

h2 {
    font-family : "Times New Roman";
    font-size   : 2rem;
    color       : orange;
}

.boton-primario{
    background-color : orange;
    color            : marron;
    border           : 1px solid #444444;
}

.boton-secundario{
    background-color : purple;
    color            : white;
    border           : 1px solid #000000;
}

Este CSS lo tendríamos que replicar para cada una de las plantillas cambiando en cada apartado los elementos que varían.

Ejemplo con SASS

La estructura propuesta es la siguiente:

• _paletas.scss
• _tema-base.scss
• tema-1.scss
• tema-2.scss
• tema-X.scss

Donde:

• Se distingue con barra baja a los ficheros que son usados solo para inclusión.
• Tendremos un fichero tema-X.scss por cada tema que queramos generar.

En _paletas.scss agregaremos las listas de colores, fuentes, etc. de todos los temas:

//Los nombres de variables se distinguen por llevar un $ delante. 
//Estas tres variables son "listas" 

$paletaTemasPrimario   : orange, blueViolet, limeGreen;
$paletaTemasSecundario : purple, coral, fireBrick;
$fuenteTemas           : "Times New Roman", Helvetica, Arial;

En _tema-base.scss agregamos nuestro código CSS pero cambiando los elementos que varían por variables (fíjate que el nombre es diferente a las variables definidas antes):

h2 {
    font-family : $fuente;
    font-size   : 2rem;
    color       : $color-primario;
}
.boton-primario{
    background-color : $color-primario;
    color            : white;
    border           : 1px solid #444444;
}
.boton-secundario{
    background-color : $color-secundario;
    color            : white;
    border           : 1px solid #000000;
}

Y finalmente agregamos a cada fichero tema-X.scss lo siguiente, teniendo en cuenta que debemos variar la variable $temaSeleccionado para que cada tema tome sus estilos correspondientes:

//En los import no es necesario agregar la barra baja ni la extensión
@import 'paletas'; 
//Cambiar el valor de esta variable en cada tema-X empezando desde 1
$temaSeleccionado : 1; 

//La función nth(lista, n) obtiene el enésimo elemento de la lista
$color-primario   : nth($paletaTemasPrimario,   $temaSeleccionado) !default;
$color-secundario : nth($paletaTemasSecundario, $temaSeleccionado) !default;
$fuente           : nth($fuenteTemas, $temaSeleccionado) !default;

@import 'tema-base';

Ya solo resta compilar nuestros ficheros tema-X.scss, para así obtener los CSS finales, cada uno separado en un fichero tema-X.css, listo para usar.

Conclusiones

Diseñar así las plantillas nos aporta varias ventajas:

• Si se modifica un color de un tema o similar, basta con modificar el fichero de paletas y recompilar para tenerlo todo en orden
• Si se añade un nuevo elemento como puede ser un cuadro flotante, solo tendremos que añadirlo a _tema-base.scss usando las variables oportunas para que, al recompilar, se nos genere cada plantilla con el elemento nuevo y su correspondiente estilo
• Nos ahorrará en grado sumo el ir copiando-pegando elementos o reemplazando colores.

Referencias: Manual de SASS en español, página oficial de SASS