CSS Overriding Variables

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;
}

Ver ejemplo

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 botones. 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;
}

Ver ejemplo

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;
}

Ver ejemplo

Compatibilidad con el navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función var().

La función var()

Traducido con 💚 desde W3Schools.com