Können CSS-Variablen dynamisch mit verschiedenen Einheiten verwendet werden?

Einheitenlose CSS-Variablen mit dynamischen Einheiten

Die Manipulation von CSS-Variablen kann oft eine Herausforderung darstellen, wenn sowohl prozentuale als auch einheitenlose Werte verwendet werden. In dieser Frage wird untersucht, wie man eine CSS-Variable ohne Einheit zuweist und sie dann austauschbar mit verschiedenen Einheiten verwendet.

Frage:

Kann eine CSS-Variable mit einer Zahl und dann festgelegt werden? in einem Fall als Prozentsatz und in einem anderen als einfache Zahl verwendet? Zum Beispiel:

--mywidth:10;

div{width:var(--mywidth) + %;}  --- should be ---> width:10%

Antwort:

Ja, dies ist mit der Funktion calc() möglich. Indem wir die Variable mit einer geeigneten Einheit multiplizieren, können wir sie dynamisch in jede gewünschte Einheit umwandeln.

Um die Variable --mywidth als Prozentsatz zu verwenden, können wir sie mit 1 % multiplizieren:

div{width:calc(var(--mywidth) * 1%);}

Beispiel:

Der folgende Code demonstriert die Verwendung der calc()-Funktion zum dynamischen Hinzufügen von Einheiten eine einheitenlose CSS-Variable:

:root {
  --a:50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg),blue 50% ,green 0);
  padding:20px;
  
  box-sizing:border-box;
}

<div class="box"></div>

Das obige ist der detaillierte Inhalt vonKönnen CSS-Variablen dynamisch mit verschiedenen Einheiten verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!