Variables en CSS

Supongo que debería escribir una larga y prolija explicación de lo que es el CSS, de su definición informática, de su creación, evolución y amplio uso, pero hoy prefiero ir al grano.

¿Cómo se usan las variables en CSS?

Pues muy sencillo:

.whiteBoxTitle

{

  --valor: #22818E;

  color: var(--valor);

}

Cómo podéis ver se definen con --[nombre de variable] y luego con var(--[nombre de variable]) se utilizan.

Se pueden declarar de manera global o de manera local.

De manera global:

:root {

   --valor: #22818E;

}

De manera local:

.ejemplo{

   --valor: #22818E;

}

¿Qué ocurre si no tenemos la variable declarada y la usamos? Pues no sucede nada, la hoja de estilos sigue funcionando.

¿Hay que declarar las variables antes de usarlas? Pues curiosamente no, el fichero CSS primero se lee y luego se procesa, así que podemos de manera contraintuitiva declarar las variables después de haberlas utilizado.

¿Es compatible con todos los navegadores? Sí, con todos menos con Internet Explorer.

Muy útil para proyectos grandes.

Espero que os sea de utilidad ^_^.