¿Qué son las variables CSS?
Las variables CSS, oficialmente llamadas CSS Custom Properties, introducen dos nuevos conceptos anteriormente inexistentes de manera nativa en CSS.
Estos conceptos son: la capacidad de definir propiedades con nombres personalizados y la capacidad de leer esas propiedades.
Con esta especificación, puedes definir variables agregando el doble guión (–) al comienzo de la misma:
html {
--size: 1rem;
}
Para usarlas, basta con escribir var() de esta manera:
button {
height: var(--size);
}
La primera diferencia con SASS es que estas variables siguen el mismo principio de herencia en cascada que las propiedades CSS nativas.
html body {
--size: 2rem;
}
body {
--size: 1.2rem;
}
/* ¿quién gana? */
Además, podemos combinar estas variables con calc:
button {
height: calc( var(--size) + 2px );
}
Las variables CSS y JavaScript
Históricamente, si querías definir estilos de un elemento calculados desde JavaScript tu única opción era esta:
el.style.height = '20px';
Las variables CSS nos dan una nueva opción para definir valores de una manera más limpia y transparente:
el.style.setProperty('--size', '20px');
Esto nos permite abstraernos de los estilos de layout aplicados a un elemento y manipularlos desde donde tocan: el CSS.
Además, un mismo valor puede ser aplicado a varios elementos que usen esa misma variable gracias a la cascada.
Ejemplo de uso
https://codepen.io/eduardosada/pen/eBaWyz
Este ejemplo se trata de un simple ojo que reacciona a los movimientos del mouse. Para ello, hay dos variables globales que especifican el lugar del puntero en relación a la pantalla.
html {
--mouse-x: 0.5;
--mouse-y: 0.5;
}
Siendo, izquierda absoluta = 0; Centro absoluto = 0.5; Derecha absoluta = 1;
const root = document.documentElement;
document.addEventListener('mousemove', e => {
let x = e.clientX / window.innerWidth;
let y = e.clientY / window.innerHeight;
root.style.setProperty('--mouse-x', x);
root.style.setProperty('--mouse-y', y);
});
En el evento ‘mousemove’ actualizamos las variables CSS con los nuevos valores de posición del mouse. La clase .pupil reacciona a esos valores globales moviendo la pupila en tiempo real. El efecto se completa con animaciones de salida para reposicionar la pupila en el centro cuando el mouse se va de la pantalla.
Impacto en la performance
Aplicándose correctamente, setear variables CSS desde JavaScript puede ser beneficioso y tener un impacto positivo en la performance del pintado del DOM.
Ocurre en el ejemplo anterior que la pupila tiene un tamaño variable, por lo que es posible configurar su tamaño en relación con el ojo.
.pupil {
--pupil-size: 0.8em;
}
De manera que para mover la pupila no basta solo con saber la posición del mouse sino también el tamaño de la pupila.
Es justamente esto lo que hace a las variables CSS tan atractivas: el poder de calcular dos valores de layout sin acceder desde JavaScript.
Si tuviéramos que hacer esto mismo desde el evento mousemove probablemente acabaríamos pidiendo el tamaño del ojo para realizar la cuenta sobre cuánto nos toca movernos.
Soporte
Por último, saber que las CSS Custom Properties son totalmente soportadas por Chrome, Firefox y Safari. Microsoft se encuentra desarrollándolo para Edge, por lo que probablemente las veamos en el primer cuatrimestre de 2017.