Las variables en CSS ¿cómo se declaran y cómo se usan?
Variables en CSS
Las variables en CSS son una característica introducida con CSS3 (CSS2 utilizaba constantes predefinidas, como los colores y las dimensiones, que se escribían directamente en el código CSS o se definían en archivos externos).
Las variables en CSS permiten definir valores personalizados y reutilizables en una hoja de estilo. Estas variables también se conocen como variables personalizadas o propiedades personalizadas.
Sigue leyendo para conocer las variables en CSS, cómo se usan y por qué son útiles, así como un ejemplo práctico.
¿Qué son y cómo son las variables en CSS?
Las variables en CSS son similares a las variables en cualquier otro lenguaje de programación: tienen un nombre único y un valor asignado, nos permiten definir un valor una vez y reutilizarlo en cualquier parte de nuestro código.
La mayor diferencia entre las variables en CSS y en otros lenguajes es la forma en que se declaran y definen.
Las variables en CSS se definen en el elemento raíz del documento, en el selector :root. De esta forma, creamos variables globales. También se pueden definir en otros elementos, clases o identificadores para crear variables específicas o sobrescribirlas solo para estos elementos concretos.
Se utilizando el formato --nombre, donde "nombre" es el nombre que le damos a la variable, seguido de dos puntos y su valor asignado. Por ejemplo, podríamos definir una variable para el color principal de nuestro sitio web de la siguiente manera:
:root{
--color_listas: #ff0000;
}
En este ejemplo estamos definiendo una variable llamada --color_listas para definir el color que le queremos poner a las listas de la página web, con un valor de #ff0000 (rojo). De esta forma, al escribir el diseño CSS de las listas, no tenemos que aprendernos ni ir a mirar el número hexadecimal del color sino que, simplemente, escribimos el nombre de la variable.
Más adelante se explica cómo se aplican las variables en CSS porque hay que nombrarlas con un código algo diferente a los demás lenguajes de programación.
¿Para qué se usan las variables en CSS?
Las variables en CSS son útiles porque nos permiten mantener un código más limpio y organizado, además de ahorrarnos tiempo al no tener que ir a consultar el valor, ya que lo hemos guardado en una variable con un nombre descriptivo.
En lugar de tener que escribir el mismo valor una y otra vez en diferentes partes de nuestro código, podemos definirlo una vez y reutilizarlo en cualquier lugar. Esto hace que nuestro código sea más fácil de leer, entender y mantener, y más rápido y cómodo de escribir.
Además, las variables en CSS también nos permiten cambiar valores en un solo lugar y afectar a todo nuestro sitio web. Por ejemplo, si queremos cambiar el color de las listas de nuestro sitio web de rojo a azul, sólo tenemos que cambiar el valor de la variable --color_listas en lugar de buscar y cambiar cada instancia de ese valor en nuestro código.
¿Cómo se usan las variables en CSS?
Recordemos que las variables en CSS se declaran en :root y hay que escribir dos líneas -- justo antes del nombre de la variable.
Una vez que hemos definido una variable en CSS, podemos utilizarla en cualquier parte de nuestro código utilizando la sintaxis:
elemento{
var(--nombre-de-la-variable);
}
Por ejemplo, si queremos utilizar la variable --color_listas en el color de fondo de las listas en toda la página web, podemos hacerlo de la siguiente manera:
:root{
--color_listas: #ff0000;
}
.elemento_listas{
background-color: var(--color-primario);
}
Hay que recordar dos cosas al utilizar variables en CSS:
- Se declaran en :root (crea variables globales) o en un elemento (crea una variable específica y concreta de ese elemento) y hay que escribir dos líneas -- justo delante del nombre de la variable
- Al utilizarla en un elemento, hay que escribir var y justo después el nombre de la variable entre paréntesis, manteniendo las dos líneas
--
Ejemplo real de uso de las variables en CSS
Veamos un ejemplo práctico de cómo se pueden utilizar las variables en CSS.
Tema oscuro y claro
Un uso muy habitual de las variables en CSS es para crear temas oscuros y claros en el sitio web.
En lugar de tener que escribir cada valor del estilo para el tema oscuro y para el tema claro, podemos definir los valores en variables y cambiarlos fácilmente según el tema seleccionado:
:root{ /* definir la variables en el elemento raíz */
--color-fondo: #ffffff; /* el fondo será blanco */
--color-texto: #000000; /* el texto será negro */
}
.tema-oscuro{ /* existirá una clase con este nombre */
--color-fondo: #000000 /* el fondo de los elementos de esta clase será negro */
--color-texto: #ffffff; /* el texto de los elementos de esta clase será blanco */
}
body{
background-color: var(--color-fondo); /* el en body de la página web, los fondos serán blancos */
color: var(--color-texto); /* en el body de la página web, los textos serán negros */
}
En este ejemplo estamos definiendo dos variables: --color-fondo y --color-texto.
Estas variables son para los colores de fondo y texto respectivamente. Luego, estamos sobrescribiendo estos valores en la clase .tema-oscuro para que todos los elementos de esa clase, y únicamente esta clase, sean de los colores definidos.