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.

Ejm

: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 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.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
:root {
	--blue: #1e90ff;
	--white: #ffffff;
}

body {
	background-color: var(--blue);
}

h2 {
	border-bottom: var(--blue);
}

.container {
	color: var(--blue);
	background-color: var(--white);
	padding: 15px;
}

button {
	--blue: #0000ff; /* VARIABLE LOCAL SOBREESCRIBE VARIABLE GLOBAL */
	background-color: var(--white);
	border: 1px solid var(--blue);
	padding: 5px;
}
</style>
</head>
<body>
<h1>Sobreescribir variables globales con variables locales</h1>
<div class="container">
	<h2>Lorem Ipsum</h2>
	<p>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
	<p>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
	<button>Yes</button>
	<button>No</button>
</div>
</body>
</html>

Añadir una nueva variable local

Si una variable es utilizada en un único lugar, podríamos haber declarado una nueva variable local, de la siguiente manera:

Ejm

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