Usando variables con CSS

Soporte

Se conocen como variables, al igual que como custom properties (propiedades personalizadas), debido a que comparten similitudes con las variables en programación (pero no son iguales).

Actualmente si queremos usar variables para los estilos de nuestros sitios web, tenemos que hacer uso de un pre-procesador CSS, lo cual no está mal, de hecho, pienso que la mejor forma de hacer CSS es usando un pre-procesador, pero gracias a CSS3 podemos crear y usar propiedades personalizadas.

Para definirla, usamos dos guiones medios -- y después el nombre, finalmente el valor que le vamos a asignar:

h1 {  
   --color: red;
}

Para usarla, solo hay que poner nuestra propiedad y en vez de poner un valor fijo como normalmente hacemos, ponemos la palabra var( ), dentro de los paréntesis el nombre de nuestra propiedad personalizada:

h1 {  
   color: var(--color);
}

Nuestro h1 va a tener un color rojo.

Como podemos ver las propiedades personalizadas pueden ser declaradas en los elementos y ser usadas ahí mismo, esto quiere decir que si definimos una de ellas con el mismo nombre pero en distintos elementos, esta se va a comportar diferente, dependiendo de su elemento.

h1 {  
   --myColor: red;
   color: var(--myColor);
}

h2 {  
   --myColor: blue;
   color: var(--myColor);
}

Nuestro h1 va a tener un color rojo y nuestro h2 un color azul (sin importar que tengan el mismo nombre de la propiedad personalizable).

Pero aquí entramos con un problema, pues las propiedades personalizadas también se pueden heredar y si tenemos un elemento con alguna, todos sus hijos tienen acceso a esta:

HTML

<div class="padre">  
   <div class="hijo"> </div>
</div>

CSS

.padre {
   --myColor: blue;
}

.hijo {
   background: var(--myColor);
}

El hijo va tener un fondo azul, ya que esta heredando la propiedad personalizable de su padre.

Puede que con esto que te acabo de mencionar no entiendas muy bien lo que te estoy diciendo, para ello te pondré el siguiente ejemplo:

Ahora imagina el caos de nuestros estilos al agregar propiedades personalizadas en nuestros elementos, puede que nos perdamos al querer encontrar alguna clase o propiedad dentro de nuestra hoja de estilos, por eso para mí lo mejor es definirlas en :root que prácticamente es como usar el elemento html.

:root {
   --myColor: blue;
   --myColorTwo: red;
}

h1 {  
   color: var(--myColor);
}

h2 {  
   color: var(--myColorTwo);
}

Aquí ya estaríamos definiendo todas nuestras propiedades personalizadas en el padre (root o html) por lo cual, todos nuestros elementos tienen acceso:

Las propiedades personalizadas o variables son realmente útiles y estoy seguro de que podemos hacer cosas increíbles con ellas, pero hay que tener siempre en cuenta lo siguiente:

Las propiedades personalizadas se heredan.
Los valores que no son validos, simplemente se ignoran.
El selector también decide que propiedad personalizada aplicar.
Puedes tener propiedades personalizadas dentro de propiedades personalizadas.

Usando variables (custom properties) con CSS