Aprofitar Sass per realitzar estils fàcilment escalables

Avui dia els desenvolupadors frontend no podem viure sense fer servir algun preprocessador que faciliti la nostra feina a l'hora de barallar-nos amb els estils CSS.

A Ymbra preferim fer servir Sass (Syntactically Awesome StyleSheets) als themes dels nostres projectes, i normalment ens decantem per desenvolupar subthemes de Zen, i ens aprofitem de tot el conjunt d'eines i avantatges que ens aporta a l'hora d'escriure els estils CSS del projecte.

El que m'agradaria explicar és com Sass pot ajudar-nos, i molt, a realitzar i millorar el procés d'una tasca en concret: la de generar el CSS d'un projecte que té uns estils en comú per tots els elements, amb unes variacions en color o tonalitat que vénen determinades per un nombre creixent de skins o variacions.

Com a exemple pràctic podem pensar en una pàgina que mostri uns colors de fons i d'enllaços diferents en funció de la selecció de l'usuari. Si assumim que aquesta tria de l'usuari es converteix a una class dins l'etiqueta body, només necessitarem tenir uns selectors amb unes propietats que variïn en funció de l'estil que estigui aplicat per aquell usuari en concret.

El codi Sass resultant de definir tres estils diferents podria ser alguna cosa com:

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

On style-golden, style-dark i style-pony són el nom de l'estil triat per l'usuari i de la class afegida a l'element body.

Aquesta solució, com segurament ja heu pensat, ens fa escriure de nou totes les línies per cada nou estil que vulguèssim afegir, resultant bastant farragós.

Per fer una solució més escalable sense haver de repetir tant de codi, Sass ens permet emmagatzemar el nom dels selectors i el valor dels diferents colors en variables de tipus list, i posteriorment realitzar un foreach que les recorri i assigni els valors de cadascun dels estils.

El codi Sass resultant seria:

// Definim les variables de tipus list.
$styles: 'golden', 'dark', 'pony';
$body_colors: #ff0, #000, #f0f;
$anchor_colors: #f00, #ccc, #505;

// Inicialitzem una variable comptador.
$i: 1;

/* Recorrem una de les variables de tipus list
  i apliquem els valors de les list a les propietats CSS. */
@each $style in $styles {
  .style-#{$style} {
    background-color: nth($body_colors, $i);
    a {
      color: nth($anchor_colors, $i);
    }
  }
  // Incrementem el valor de la variable comptador.
  $i: $i + 1;
}

D'aquesta manera podríem fàcilment afegir tots els estils que vulguéssim modificant només els valors emmagatzemats a les variables de tipus list fent que el nostre codi resultant sigui molt més mantenible.