Variables de anulación de CSS
Anular variable global con variable local
En la página anterior hemos aprendido que las variables globales se pueden acceder/usar a través de todo el documento, mientras que las variables locales solo se pueden usar dentro del selector donde se declara.
Mira el ejemplo de la página anterior:
Ejemplo
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
A veces queremos que las variables cambien solo en una sección específica de la página.
Supongamos que queremos un color diferente de azul para los elementos de los botones. Luego, podemos volver a declarar la variable --blue dentro del selector de botón. Cuando usamos var(--blue) dentro de este selector, usará el valor de la variable local --blue declarado aquí.
Vemos que la variable local --blue anulará la variable global --blue para los elementos del botón:
Ejemplo
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Agregar una nueva variable local
Si una variable se va a usar en un solo lugar, también podríamos haber declarado una nueva variable local, como esta:
Ejemplo
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la
var()función.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Función CSS var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |