Variables anuladas de CSS

Tabla de contenido

Anular variable global con variable local

De la página anterior hemos aprendido que se puede acceder/utilizar variables globales a través de todo el documento, mientras que Las variables locales solo se pueden usar dentro del selector donde se declaran.

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</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>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

A veces queremos que las variables cambien solo en una sección específica de la página.

Supongamos que queremos un color azul diferente para los elementos de los botones. Entonces podemos Vuelva a declarar la variable --blue dentro del selector de botones. Cuando usamos var(--blue) dentro de este selector, utilizará el valor de la variable local --blue declarado aquí.

Vemos que la variable local --blue anulará la variable --blue global variable 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;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Override Global Variable With Local Variable</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>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Agregar una nueva variable local

Si una variable se va a utilizar 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;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>New Local Variable</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>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Soporte del navegador

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

Function
var()	49.0	15.0	31.0	9.1	36.0

Función CSS var()

var(): Inserta el valor de una variable CSS