Al igual que Javascript, CSS también tiene variables. Estas variables pueden ayudarnos mucho al momento de dar estilo a nuestra pagina.
Antes de declarar las variables CSS se debe declarar la pseudo clase “:root”:
:root {
}
Ojo: Siempre se empieza con dos puntos (😃.
Esta pseudo clase debe ir arriba de todo código.
Una vez declarada la pseudo clase, hay que declarar las variables. La estructura de la variable CSS es:
–nombre-de-variable: valor;
Ojo: Al principio, la variable siempre debe tener dos guiones (–).
:root {
--main-color: red;
--main-font: Arial;
}
¡Listo! Tu variable esta declarada.
Ahora para invocar tenemos que hacerlo con var(–nombre-de-variable), de hecho. parece una función.
body {
font-family: var(--main-font);
background-color: var(--main-color);
}
Y asi, en vez de editar cada declaración de estilo, solo editas el valor de la variable. También son buenas para reutilizar código.
