Aprovechar Sass para realizar estilos fácilmente escalables

Hoy día los desarrolladores frontend no podemos vivir sin usar algún preprocesador que facilite nuestro trabajo a la hora de pelearnos con los estilos CSS.

En Ymbra preferimos usar Sass (Syntactically Awesome StyleSheets) en los themes de nuestros proyectos, y normalmente nos decantamos por desarrollar subthemes de Zen, y nos aprovechamos de todo el conjunto  de herramientas y ventajas que nos aporta a la hora de escribir los estilos CSS del proyecto.

Lo que me gustaría explicar es cómo Sass puede ayudarnos, y mucho, en realizar y mejorar el proceso de una tarea en concreto: la de generar el CSS de un proyecto que tiene unos estilos en común para todos los elementos, con unas variaciones de color o tonalidad que vienen determinadas por un nombre creciende de skins o variaciones.

Como ejemplo práctico podemos pensar en una página que muestre unos colores de fondo y de enlaces diferentes en función de la selección del usuario. Si asumimos que esta elección del usuario se convierte en una class dentro de la etiqueta body, solamente necesitaremos tener unos selectores con unas propiedades que varíen en función del estilo que esté aplicado para aquel usuario en concreto.

El código Sass resultante de definir tres estilos diferentes podría ser algo como:

// Estilo de colores Golden.
.style-golden {
  background-color: #ff0;
  a {
    color: #f00;
  }
}
// Estilo de colores Dark.
.style-dark {
  background-color: #000;
  a {
    color: #ccc;
  }
}
// Estilo de colores Pony.
.style-pony {
  background-color: #f0f;
  a {
    color: #505;
  }
}

Donde style-golden, style-dark y style-pony son el nombre del estilo escogido por el usuario y de la class añadida en el elemento body.

Esta solución, como seguramente ya habéis pensado, nos haría escribir de nuevo todas las líneas para cada nuevo estilo que quisiéramos añadir, resultando bastante pesado.

Para hacer una solución más escalable sin tener que repetir tanto código, Sass nos permite almacenar el nombre de los selectores y el valor de los diferentes colores en variables de tipo list, y posteriormente hacer un foreach que las recorra y asigne los valores de cada uno de los estilos.

El código Sass resultante sería:

// Definimos las variables de tipo list.
$styles: 'golden', 'dark', 'pony';
$body_colors: #ff0, #000, #f0f;
$anchor_colors: #f00, #ccc, #505;

// Inicializamos una variable contador
$i: 1;

/* Recorremos una de las variables de tipo list
  y aplicamos los valores de las list a las propiedades CSS. */
@each $style in $styles {
  .style-#{$style} {
    background-color: nth($body_colors, $i);
    a {
      color: nth($anchor_colors, $i);
    }
  }
  // Incrementemamos el valor de la variable contador.
  $i: $i + 1;
}

De esta manera podríamos añadir todos los estilos que quisiéramos modificando solamente los valores almacenados en las variables de tipo list haciendo que nuestro código resultante sea mucho más mantenible.