Variables cubiertas CSS

Cubrir la variable global con una variable local

De la página anterior sabemos que se puede acceder / usar la variable global en todo el documento, mientras que la variable local solo se puede usar dentro del selector donde se declara.

Vea el ejemplo en 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;
}

Prueba personalmente

A veces, queremos que la variable cambie solo en una parte específica de la página.

Supongamos que queremos que el elemento button utilice un azul diferente. Entonces, podemos declarar nuevamente la variable --blue dentro del selector button. Cuando usamos var(--blue) en este selector, usará el valor de la variable local --blue aquí declarada.

Vemos que la variable local --blue cubre la variable global --blue del elemento button:

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;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Prueba personalmente

Agregar una nueva variable local

Si solo se utiliza una variable en un solo lugar, también podemos declarar una nueva variable local, como así:

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;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px sólido var(--button-blue);
  padding: 5px;
}

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Función
var() 49.0 15.0 31.0 9.1 36.0

Función var() CSS

Función Descripción
var() Insertar el valor de la variable CSS