CSS nos permite crear nuestras propias variables, es decir guardar en una variable un valor para poder ser reutilizado en otras partes del código. Su sintaxis es sencilla

:root{

—main-color:red;

}

Es una buena practica utilizar la pseudoclase :root para poder declarar variables, ya que abarca a todo el documento.

Las variables se declaran utilizando dos guiones (—) al principio.

El nombre de la variable

El valor que quedará guardado dentro de la variable

Utilizar variables

Para poder utilizar una variable en un momento determiando del código en CSS es necesario utilizar la funcion var(). Como parametros a esa funcion debemos pasarle el nombre de la variable. Un ejemplo. Queremos que el fondo de una pagina sea el de una variable que declaramos previamente

:root{
	--colores-river:linear-gradient(100deg, rgba(255,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

body{
	background:var(--colores-river);
}

Valores de respaldo

CSS nos permite crear valores de respaldo en el caso en que la variable todavía no esté inicializada o el valor de la variable no sea valido para esa propiedad. Un ejemplo teniendo en cuenta el caso anterior. Podemos agregarle un valor de respaldo por si la variable se modifica o no puede ser accesible

:root{
	--colores-river:linear-gradient(100deg, rgba(255,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

body{
	background:var(--colores-river, red);
}