Después de aprender a usar Sass en el artículo anterior, vamos a dedicarnos a conocer una de sus principales y más sencillas utilidades, las variables.

En CSS siempre se echó de menos la posibilidad de usar variables. Los preprocesadores fueron los primeros en incorporarlas y por supuesto, Sass nos las ofrece para facilitar nuestro día a día con el uso del CSS.

Aunque hoy ya podemos usar variables de CSS, pues se han agregado recientemente al estándar, seguimos con un problema fundamental, que el código con esas variables no será compatible con todos los navegadores. Motivo por el cual sigue siendo interesante apoyarse en los preprocesadores.

Las variables son, como en los lenguajes de programación tradicionales, capaces de almacenar un dato, que luego podremos usar las veces que haga falta a lo largo de todo nuestro código Sass.

Por qué son útiles las variables

Pensemos en una declaración de un color. Por ejemplo el color de texto destacado, o el color de texto que se puede usar para representar un error. Seguramente querramos usar ese mismo color en diversos momentos, asignando a diversos selectores.

La opción habitual sería escribir ese color en todos los lugares donde se necesite, repitiendo una y otra vez el mismo valor RGB aquí y allá. Sin embargo, esto puede producir situaciones poco atrayentes.

• Si es un RGB complicado, algo como #3F6DB8, es posible que no nos acordemos de ese valor cada vez que lo queramos usar, teniendo que ir a otra definición de ese mismo color, copiando y pegando donde se vuelva a necesitar.
• Aún peor, si más adelante se pretende cambiar ese color por otro. Tendríamos que buscar por todo el proyecto los lugares donde se usó para sustituirlo en todos ellos.

Lo mismo explicado con colores puede ocurrir con tipografías, tamaños de fuente, márgenes, etc.

En cambio, si usamos una variable, podríamos solucionar estas situaciones de una, facilitando la codificación y el mantenimiento del código CSS, creando diseños consistentes, que reflejen correctamente los colores corporativos de cada cliente.

Cómo se definen variables en SCSS (Sass)

Ahora veamos cómo podemos definir variables para el preprocesador Sass.

Las variables se definen igual que otros atributos CSS, solo que no están ligados a un selector en concreto. Además, en Sass las variables comienzan siempre con el caracter "$".

$color-primario: #55A;
$color-secundario: #6B6;
$color-texto: #666;

$espaciado-estandar: 10px;
$espaciado-doble: 20px;

$fuente-normal: 1em;
$fuente-pequena: 0.8em;
$fuente-grande: 1.4em;

$tipografia-general: arial, verdana, sans-serif;
$tipografia-alternativa: 'Times New Roman', Times, serif;

Como puedes ver en este código, es una buena idea definir en variables aspectos estéticos, que se van a usar a lo largo de todo el código CSS. Eso también ayudará a obtener un código CSS más semántico, fácil de leer y entender por humanos.

Cómo se usan variables en Sass

Ahora veamos cómo podemos usar las variables definidas en el punto anterior. Realmente es bien sencillo, ya que simplemente tendremos que usar el mismo nombre de la variable.

Las variables las usaremos como valores de atributos CSS. Esas propiedades de CSS tendrán que estar ligados a un selector, igual que siempre en las hojas de estilo en cascada. En el selector podremos mezclar valores de atributos que vengan definidos en variables, con otros valores especificados directamente sin usar variables.

Este código SCSS hace uso de muchas de las variables definidas anteriormente.

body {
  color: $color-texto;
  font-family: $tipografia-general;
}

h1 {
  background-color: $color-primario;
  color: $color-blanco;
  font-family: $tipografia-alternativa;
  font-size: $fuente-grande;
  padding: $espaciado-estandar;
  text-transform: uppercase;
  border-radius: 12px;
}

div.destacado {
  border: 1px solid $color-secundario;
  padding: $espaciado-estandar $espaciado-doble;
}

Cómo es el código CSS generado

Para acabar, puedes ver el código CSS generado, aunque estoy seguro que no tendrías mucho problema para imaginarlo.

Todo lo que son definiciones de variables se pierde, ya que en el código CSS no se necesitan definir. Solo nos quedan los valores de las variables que se llegaron a aplicar en los atributos de los selectores usados.

body {
  color: #666;
  font-family: arial, verdana, sans-serif; }

h1 {
  background-color: #55A;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.4em;
  padding: 10px;
  text-transform: uppercase;
  border-radius: 12px; }

div.destacado {
  border: 1px solid #6B6;
  padding: 10px 20px; }

Las variables en sí no tienen mucho más que explicar, solo mencionar que es interesante que las uses bastante, ya que con el tiempo tu código CSS crecerá bastante y si has definido un buen conjunto de variables serás capaz de mantener esos valores cómodamente a lo largo de todo tu CSS.

Incluso podrás llevarte las definiciones de variables de un proyecto a otro, cambiando sus valores para adaptarse al nuevo proyecto, con lo que el esfuerzo de definición de esas variables y su utilización podrá rentabilizarse a lo largo del tiempo, en muchos proyectos.