CSS-Variablen – Die Funktion var()


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


CSS-Variablen

Die Funktion var() wird verwendet, um den Wert von a einzufügen CSS-Variable.

CSS-Variablen haben Zugriff auf das DOM, was bedeutet, dass Sie erstellen können Variablen mit lokalem oder globalem Gültigkeitsbereich, ändern Sie die Variablen mit JavaScript und Ändern Sie die Variablen basierend auf Medienabfragen.

Eine gute Möglichkeit, CSS-Variablen zu verwenden, besteht darin, Ihre Farben festzulegen Design. Anstatt die gleichen Farben immer wieder zu kopieren und einzufügen, können Sie dies tun Platzieren Sie sie in Variablen.


Der traditionelle Weg

Das folgende Beispiel zeigt die traditionelle Art, einige Farben in einem Stylesheet zu definieren (durch Definieren der zu verwendenden Farben für jedes spezifische Element):

Beispiel

 body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: 
  #1e90ff;
  
  background-color: #ffffff;
  padding: 15px;
}
button {
  
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px 
  solid #1e90ff;
  padding: 5px;
}   

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #1e90ff;
}

h2 {
  border-bottom: 2px solid #1e90ff;
}

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}
</style>
</head>
<body>

<h1>The Traditional Way</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>



Syntax der Funktion var()

Die Funktion var() wird verwendet, um den Wert von a einzufügen CSS-Variable.

Die Syntax der Funktion var() lautet wie folgt:

 var(--name, value)
name

Erforderlich. Der Variablenname (muss mit zwei beginnen Striche)

value

Optional. Der Fallback-Wert (wird verwendet, wenn die Variable nicht gefunden wird)

Hinweis: Der Variablenname muss mit zwei Bindestrichen (--) beginnen und es wird zwischen Groß- und Kleinschreibung unterschieden!



So funktioniert var()

Zunächst einmal: CSS-Variablen können einen globalen oder lokalen Gültigkeitsbereich haben.

Auf globale Variablen kann im gesamten Dokument zugegriffen/verwendet werden Lokale Variablen können nur innerhalb des Selektors verwendet werden, in dem sie deklariert sind.

Um eine Variable mit globalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie innerhalb von :root Wähler. Der Selektor :root entspricht dem Stammelement des Dokuments.

Um eine Variable mit lokalem Gültigkeitsbereich zu erstellen, deklarieren Sie sie innerhalb des Selektors, der sie verwenden wird.

Das folgende Beispiel entspricht dem obigen Beispiel, aber hier verwenden wir die Funktion var().

Zuerst deklarieren wir zwei globale Variablen (--blue und --white). Dann verwenden wir die var()-Funktion, um den Wert der Variablen später in das Stylesheet einzufügen:

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>


Vorteile der Verwendung von var() sind:

  • macht den Code leichter lesbar (verständlicher)

  • erleichtert das Ändern der Farbwerte erheblich

Um die blaue und weiße Farbe in ein weicheres Blau und Weiß zu ändern, brauchen Sie nur Um die beiden Variablenwerte zu ändern:

Beispiel

 :root {
  --blue: #6495ed;
  --white: #faf0e6; 
}

  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: #6495ed;
  --white: #faf0e6; 
}

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>



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