Variables en CSS

Uso básico de variables en hojas de estilo.

Las Variables en CSS (Cascading Style Sheetsson) son entidades las cuales pueden ser utilizadas dentro del mismo file en el que fueron declaradas.

Para crear un archivo de CSS sin utilizar un preprocessing languages como lo es SASS, LESS, Stylus y PostCSS. En ciertas ocasiones es bastante complejo, ya que existen recursos específicos que necesitamos de manera global. Como por ejemplo: los colores, tipografía, tamaños entre otras cosas.

Anteriormente todo esto “no era posible” de solucionar solo con CSS , es por esa razón que surgieron los preprocesadores de lenguaje, para escribir de manera rápida y ágil hojas de estilo en cascada.

Pero ahora con el desarrollo de variables en CSS podemos realizar su uso de manera sencilla.

1.- Para poder hacer uso de las variables, primero tenemos que declarar nuestro selector raíz llamado root dentro de nuestro file.

:root{
}

2.- Un vez inicializando nuestro selector root, pasaremos a declarar nuestras distintas variables. Para declarar una variable es muy sencillo, mediante el nombre la variable iniciada con doble guion -- como por ejemplo:

:root{ 
--myname: value;
}

3.- Declarar todas tus variables necesarias, para evitar repetir recursos y disminuir lineas de código.

4.- Una vez definidas todas tus variables pasaremos a la utilización de sí mismas con la función llamadavar() la cual recibe como parámetro el nombre de la variable como por ejemplo:

body{
color: var(--color-text);
}

Este es solo un uso sencillo de las variables quizás te estés preguntando que tiene de diferenciaría al estar utilizando algún preprocesador, en el cual también puedes hacer el uso de variables ¿no tiene sentido verdad?. Pero la magia de todo esto, esta en el momento de querer manipular dichas variables.

Sí usamos las variables de CSS podemos manipularlas con Javascritp desde nuestro navegador, pero si estamos utilizando SASS tendríamos que volver a compilar nuestro file para volver a generar nuestro CSS final.

/*
Theme CSS
*/
body{
margin: 0;
font-family: var(--font-text);
color: var(--color-text);
background-color: var(--color-body);
}
h1, h2, h3, h4, h5, h6{
font-family: var(--font-title);
color: var(--color-title);
margin-bottom: 25px;
}
a{
color: var(--color-link);
text-decoration: underline;
}
code{
font-family: var(--font-monospace);
}

De esta manera, podemos realizar algún Theme de CSS sencillo, el cual puede ser manipulado desde JavaScript.

//Init selector root
var root = document.querySelector(':root');
//Manipule body background-color
root.style.setProperty('--body-color', '#000000');

🕵️‍Compatibilidad

Ver tabla de compatibilidad | Caniuse CSS Variables

🤔¿Quién hace uso de variables?

En la actualización del Framework de CSS llamado Bootstrap el cual es uno de los más utilizados por los desarrolladores de Front-End. Se realizó el uso de variables de CSS.

Te interesa saber más acerca de CSS Variables | Ver course