Überschreibende CSS-Variablen

Inhaltsverzeichnis

Globale Variable mit lokaler Variable überschreiben

Auf der vorherigen Seite haben wir gelernt, dass auf globale Variablen im gesamten Dokument zugegriffen/verwendet werden kann Lokale Variablen können nur innerhalb des Selektors verwendet werden, in dem sie deklariert sind.

Schauen Sie sich das Beispiel von der vorherigen Seite an:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Manchmal möchten wir, dass sich die Variablen nur in einem bestimmten Abschnitt der Seite ändern.

Angenommen, wir möchten eine andere Blaufarbe für Schaltflächenelemente. Dann können wir Deklarieren Sie die Variable --blue innerhalb der Schaltflächenauswahl erneut. Wenn wir var(--blue) verwenden Innerhalb dieses Selektors wird der hier deklarierte lokale --blue-Variablenwert verwendet.

Wir sehen, dass die lokale Variable --blue die globale Variable --blue überschreibt Variable für die Schaltflächenelemente:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Fügen Sie eine neue lokale Variable hinzu

Wenn eine Variable nur an einer einzigen Stelle verwendet werden soll, hätten wir auch eine neue lokale Variable deklarieren können, etwa so:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das vollständig unterstützt var()-Funktion.

Function
var()	49.0	15.0	31.0	9.1	36.0

CSS var()-Funktion

var(): Fügt den Wert einer CSS-Variablen ein