Qué son, y cómo utilizar las variables en CSS

2

La primera vez que escuche hablar de las variables en CSS no me sorprendió porque sabía que esto tarde que temprano tenía que llegar a CSS, pero lo que sí me sorprendió fue una frase que leí de uno de los Gurús de CSS, donde decía que las futuras variables de CSS llegarían con más poder que las variables que utilizamos habitualmente en los pre-procesadores.

Pero, ¿cuál es el problema de las variables en los pre-procesadores?

La mayoría de nosotros hemos utilizado variables en los preprocesadores CSS (Sass/Less o Stylus), esto para almacenar valores que luego utilizaremos en las propiedades que requieran estos valores comunes. Sin embargo, por su propia naturaleza estas no son dinámicas, porque una vez que se han establecido estas no pueden actualizarse en el lado del cliente. Claro, lo que hacemos habitualmente para actualizar el valor de una variable es alterar su valor y volver a ejecutar el proceso de construcción para obtener el nuevo valor, pero una vez desplegado, ese valor no puede ser actualizado por el propio sitio web.

Entendiendo esto los editores de este módulo colocan en el campo de juego las variables CSS que hasta esta fecha se encuentra en su nivel 1: CSS Custom Properties for Cascading Variables Module Level 1 . Donde la gran característica de estas es que pueden actualizarse a través del propio sitio web gracias a JavaScript, esto utilizando los métodos getPropertyValue() y setProperty(),  lo que las hace mucho más potente y flexible que sus homólogas utilizadas en los pre-procesadores.

variables en CSS

Sintaxis básica: Estas se definen utilizando el nombre de la variable y el valor que tendrá:  --variable-name: value y para utilizarlas simplemente la especificamos en las propiedades de la siguiente forma: var(--variable-name) Una forma común para trabajar con las variables de CSS es definirlas con :root que es la pseudo-clase que selecciona el elemento raíz del documento, y así las tenemos disponibles para utilizarlas con cualquier regla de selección que tengamos en la hoja de estilos.

:root {
   --primary-color: crimson;
   --secondary-color: green;
   --spacing: 20px;
}
.title {
   color: var(--primary-color);
   border-bottom: 1px solid var(--secondarycolor);
}
.grid-item {
   margin: var(--spacing);
   padding: var(--spacing);
}
Lo interesante es que podemos cambiar el valor de la variable en función a las acciones realizadas por el usuario o tamaño de pantalla donde se visualice la página web, esto gracias a los Media Queries. Sólo necesitamos cambiar el valor de la variable y esta se aplicará en cualquier lugar donde la utilicemos.
@media (max-width: 767px) {
   :root {
      --primary-color: #000;
      --spacing: 40px;
   }
}
Otro beneficio que se obtiene al utilizar las variables en CSS es que están llegan a formar parte del core de CSS como cualquier otro valor del lenguaje conectándose de forma natural con la cascada, llegando estas a hacer cosas que no se podrían hacer con las variables de los preprocesadores. Como por ejemplo cambiar sus valor en consecuencia a los elemento seleccionado con las diferentes pseudo-clases de CSS.
.grid-item {
   color: var(--primary-color);
   margin: var(--spacing);
   padding: var(--spacing);
}
.grid-item:first-child {
   --primary-color: #000;
   --spacing: 0;
}
Otra de las características importante que nos presentan las Variables de CSS es que estos valores también pueden ser accedidos por javascript para actualizar sus valores de forma dinámica. Este ejemplo lo podemos ver en este Pen de Paul Thomas:

See the Pen SS Variables by Paul Thomas(@motionimaging) on CodePen
1


Esto de las variables de CSS es ¡Fantástico!

Lo siguiente a mirar es el soporte en los diferentes navegadores, así que veamos el soporte actual de las CSS Variables que nos provee caniuse.com

Can I Use css-variables? Data on support for the css-variables feature across the major browsers from caniuse.com.

Y por supuesto tener en cuenta que este modulo aun esta en la etapa Editor’s Draft y aun no tenemos las características definitivas.

Comentar

avatar
Ordenar:   Nuevos | Antiguos | Más votados
blogdopata

Entonces a la larga nos olvidaremos de los PreProcesadores_?

wpDiscuz