Referéncia CSS : Variables
Categorías : CSS, JavaScript, HTML, Programación.

Recientemente se han vuelto a habilitar las variables css en chrome, y me parece un tema a empezar a tener en cuenta ya que a mi entender es algo que debería haber existido desde el CSS1. Por ejemplo en cualquier diseño web se acaban utilizando siempre unos determinados colores, estos colores se pueden llegar a repetir decenas e incluso cientos de veces en una o varias hojas de estilo, y si llega el caso de querer modificar uno de esos colores vamos a tener una ardua tarea por delante.
Con las variables CSS este problema desaparece, ya que podemos declarar dicho color y enlazar todos los elementos que lo van a utilizar a la variable. Además podemos llegar a modificar la variable desde JavaScript, lo que nos da aún mas versatilidad. Por ultimo también ayuda mucho a la hora de leer el código, ver una variable del estilo --ColorFondo
que ver #632784
.
En definitiva todo son ventajas, excepto por una cosa... no funciona ni funcionará en ninguna versión de Internet Explorer. Por suerte he leído en alguna parte que desde hace poco funcionan las variables css en Edge (el nuevo navegador de windows 10), pero es algo que no he podido comprobar.
Declaración de variables CSS
Lo primero que debemos entender antes de nada es que las variables se declaran en un ámbito, y este ámbito puede ser global o restringido solo para ciertos elementos.
Los nombres de las variables CSS siempre deben empezar con --
seguido del nombre, por ejemplo :
--Variable : valor;
El valor puede ser cualquier cosa en principio...
--Variable : var(--Variable);
que mi para mi mente retorcida es algo que podría acabar en un bucle infinito o incluso en un crash, y oye me ha sorprendido... no he roto nada, ni ha pasado nada.A continuación un par de ejemplos de creación de variables :
/* Variable global accesible desde todas las etiquetas */:root {--MiVariable:calc(100% - 6px);}
/* Variable local accesible solo para las etiquetas que estén dentro de #MiID, o .MiClase */#MiID, .MiClase {--MiVariable:blue;}
En el primer ejemplo se ha creado --MiVariable
dentro del selector :root de forma que todas las etiquetas del documento podrán tener acceso a ella. En el segundo ejemplo la variable --MiVariable
solo existe para la etiquetas #MiID, .MiClase, y para todas las etiquetas que estén dentro de estas.
Para comprender mejor como funcionan las variables globales y locales os he preparado un ejemplo en el que el color del texto de las etiquetas <span>
se determina por una variable CSS.
Vamos a tener la variable --ColorTexto
con el mismo nombre en varios ámbitos, y con distintos valores. Fijaros en las líneas 10, 12, y 14 donde podemos ver 3 variables con valores distintos.
- En el ámbito de
:root
las etiquetas<span>
tienen el color del texto rojo. (Las variables globales pueden ser utilizadas por todas las etiquetas dentro del<body>
) - En el ámbito de
.ColAzul
las etiquetas<span>
tienen el color del texto azul. - En el ámbito de
.ColVerde
las etiquetas<span>
tienen el color del texto verde.
Ejemplo :
Enlazar variables a las propiedades
Una vez tenemos creadas las variables hay que enlazarlas a las propiedades, para ello se utiliza la función var.
Sintaxis
var ( --Variable [requerido] , ValorInicial [opcional] )
--Variable | Nombre de la variable a enlazar. Las variables siempre empiezan por -- |
ValorPorDefecto | Valor que recibirá la propiedad en el caso de no existir la variable. Este parámetro es opcional, si no se especifica este parámetro y la variable no existe, la propiedad permanecerá intacta. |
Veamos un ejemplo :
:root { --MargenIzquierdo : 2em; }p { margin-left : var(--MargenIzquierdo); }
En la --MargenIzquierdo
con un valor de 2em
. En la --MargenIzquierdo
utilizando la función var.
article { --ColorBorde : #000; }button { border : 1px solid var(--ColorBorde, #000); }
En este ejemplo tenemos una variable con el color del borde, y aplicamos la función var en el último parámetro de la propiedad border. Como la variable --ColorBorde solo existe dentro del ámbito de una etiqueta article, nos aseguramos de que el borde será negro en el segundo parámetro de la función var.
Obtener y modificar variables CSS desde JavaScript
Hasta ahora hemos visto como crear y utilizar variables en el CSS, pero que pasa si necesitamos mostrar o modificar una variable via JavaScript? Aquí la cosa se complica ya que nos va a tocar acceder a los estilos computados por el navegador.
El siguiente ejemplo nos muestra como obtener una variable global desde los estilos computados por el navegador :
function ObtenerVariableCSS(Variable) {var EstilosComputados = window.getComputedStyle(document.body);return EstilosComputados.getPropertyValue(Variable);}
La función del ejemplo anterior nos devuelve el contenido de la variable global que especifiquemos.
En la window.getComputedStyle
, para después en la getPropertyValue
, que nos devolverá el valor de la propiedad o en este caso variable especificada.
Veamos como asignar un valor a una variable global del CSS :
function AsignarVariableCSS(Variable, Valor) {document.body.style.setProperty(Variable, Valor);}
Como veis en el ejemplo anterior se utiliza la función style.setProperty
, de un elemento que se encuentre dentro del ámbito de la variable. En este caso como la variable es global podemos utilizar document.body
directamente.
Por último os dejo un ejemplo que modifica vía JavaScript cuatro variables que contienen los colores de los cuatro marcos que tiene el ejemplo.