Wie erbe ich Werte mithilfe von CSS-Variablen mit einem Fallback?

So erben Sie Werte in CSS-Variablen

CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, ermöglichen es uns, Werte auf eine Weise zu speichern und zu bearbeiten, die in unserem gesamten Prozess wiederverwendet werden kann Stylesheet. Eine Einschränkung von CSS-Variablen besteht jedoch darin, dass sie keine Werte von ihren übergeordneten Elementen erben können.

Problem

Betrachten Sie beispielsweise den folgenden Code:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

In diesem Code haben wir eine :root-Regel, die eine --color-Variable mit dem Standardwert rgba(20, 20, 20, 0,5) definiert. Wir haben auch eine .box-Klasse, die einige Stile für ein rechteckiges Element festlegt, und ein :before-Pseudoelement, das ein kreisförmiges Element innerhalb der Box erstellt.

Die Hintergrundeigenschaft des :before-Pseudoelements ist festgelegt zu var(--color), was bedeutet, dass es den Wert der Variablen --color erbt. Wir können jedoch den Wert der Variable --color für jedes Feld überschreiben, indem wir Inline-Stile verwenden, wie im folgenden Beispiel gezeigt:

<div class="box red">
<p>Die Variable --color der ersten beiden Felder wird auf gesetzt rgba(0, 255, 0, 0.5) bzw. rgba(0, 255, 255, 0.5), während das dritte Feld versucht, die Variable --color von seinem übergeordneten Element zu erben. Wie wir bereits erwähnt haben, können CSS-Variablen jedoch keine Werte erben, daher bleibt die Variable --color für das dritte Feld auf ihrem Standardwert rgba(20, 20, 20, 0.5).</p>
<h3 id="Lösung">Lösung</h3>
<p>Die Funktion var() bietet eine Möglichkeit, einen Fallback-Wert für eine CSS-Variable zu definieren, falls die Variable nicht definiert oder auf ihren Anfangswert gesetzt ist. Der Fallback-Wert wird als zweites Argument der Funktion var() angegeben, wie im folgenden Beispiel gezeigt:</p>
<pre class="brush:php;toolbar:false">background: var(--color, inherit);

In diesem Beispiel, wenn die Variable --color nicht definiert oder auf ihren Wert gesetzt ist Beim Anfangswert erbt die Hintergrundeigenschaft die Farbe des übergeordneten Elements. Dies ist genau das Verhalten, das wir in diesem Fall wollen.

Hier ist der aktualisierte Code mit dem zusätzlichen Fallback-Wert:

:root {
  --color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 0, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color, inherit);
  filter: invert(1);
}

Jetzt erben alle drei Kästchen die Farbe ihrer übergeordneten Felder Element, auch wenn die Variable --color in den Inline-Stilen auf einen anderen Wert gesetzt ist.