Introducción a variables en CSS

Introducción a variables en CSS

Es posible usar variables en CSS. No es ningún truco ni tampoco con el uso de alguna librería de terceros o pre procesado. Conforme avanza el estándar de CSS se habilitan nuevas funcionalidades que nos permiten extender las ventajas de usar las hojas de estilo. En este tutorial les voy a dar una introducción a las variables en CSS para que las puedan poner en práctica desde ahorita.

¿Qué son las variables en CSS?

Si estás familiarizado con lenguajes de programación es casi el mismo concepto. Las variables en CSS nos permiten asignar un valor a una variable, la cuál puede ser llamada o referenciada en todos los estilos que estén dentro del alcance de esa variable. Siguiendo la dinámica de hojas de estilos en cascada, el alcance de una variable es también en cascada, es decir, solo va a ser reconocible por los estilos a nivel de estructura del DOM que estén debajo del indeitificador padre. En estricta teoría dado que solo podemos declarar la variable con un valor una sola vez, ya que no se puede cambiar el valor en CSS en tiempo de ejecución sería más una constante que variable, pero también vamos a ver que sí se puede cambiar ese valor por medio de Javascript.

¿Cómo funciona?

Tradicionalmente si tuvieramos dos estilos y quisieramos usar por ejemplo, el mismo color de texto, tendríamos que definirlo en cada estilo. Usando pre procesadores se resuelve pero es un paso extra para un proceso que ahora puede ser nativo.

image

Si nosotros queremos transformar el estilo anterior usando variables vamos a crear un estilo :root que aplique al padre de todos los elementos en el DOM, o sea, <HTML>

image

Cuando queramos usar la variable basta que llamarla usando una función var()

image

Cada vez que queramos cambiar el color de dichos elementos tendremos que cambiar el de la declaración de variable, no donde se aplica. Si quisieramos tener una variable local que aplique solo en los hijos específicos de un identificador podríamos hacer esto:?

image

Declaramos en el identificador padre la variable y posteriormente en algún hijo que herede esa variable aplicarla, ¿fácil no?

Acceder a variables de CSS con Javascript

Si lo que queremos es acceder a la variable por medio de Javascript también es posible. Lo que tenemos que hacer es obtener el identificador :root o el que estémos usando para almacenar las variables. A continuación obtenemos la variable y podemos obtener su valor o asignarle otro.

image

image

¿Qué navegadores tienen soporte?

image

Un 77% de los usuarios a nivel mundial tienen un navegador que soporta el uso de variables en CSS. Definitivamente en donde más puede haber impacto es en Internet Explorer y en navegadores más sencillos como Opera para smartphones o el navegador de Samsung en televisiones, pero Chrome, Firefox, Safari, incluso Edge deberían funcionan sin problemas.

Introducción a variables en CSS Introducción a variables en CSS Reviewed by Marcos Rivas on lunes, marzo 19, 2018 Rating: 5