Einheitenlose CSS-Variablen: Konvertierung von Einheiten

Bei der Arbeit mit CSS-Variablen ist es oft wünschenswert, einen einheitenlosen Wert zu verwenden, um Flexibilität und Kontrolle über die Präsentation zu gewährleisten. Allerdings erwarten CSS-Eigenschaften in verschiedenen Situationen bestimmte Einheiten. In diesem Leitfaden wird eine Technik demonstriert, mit der einheitenlose Variablen verwendet und nahtlos in die erforderlichen Einheiten konvertiert werden können.

Szenario:

Sie müssen eine Variable --mywidth mit a definieren Zahlenwert. In Ihrem CSS möchten Sie diese Variable jedoch sowohl als Prozentsatz für die Breite von Elementen als auch als einfache Zahl für calc()-Operationen verwenden.

Lösung:

calc() und Einheitenmultiplikation:

Um dies zu erreichen, verwenden Sie die calc()-Funktion und führen Sie eine einfache Multiplikation mit der gewünschten Einheit durch. Zum Beispiel:

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

Dieser Ansatz skaliert die einheitenlose Variable --mywidth auf einen Prozentwert um und befolgt dabei die Anforderung der width-Eigenschaft. Um die Variable als Zahl für Berechnungen zu verwenden, passen Sie den Multiplikator entsprechend an:

calc(var(--mywidth) * 1px)

Beispiel:

Betrachten Sie den folgenden Code:

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

In diesem Beispiel beginnt die Variable --a ohne Einheiten. Innerhalb der .box-Klasse wird calc() verwendet, um es nach Bedarf in Prozentsätze, Pixel und Grad umzuwandeln. Das Ergebnis ist ein Feld mit den angegebenen Abmessungen, Rahmenbreite, Verlaufswinkel und Polsterung.

Mit dieser Technik können Sie CSS-Variablen mit einheitenlosen Werten definieren und diese anschließend in die entsprechenden Einheiten konvertieren, was für mehr Flexibilität und Effizienz sorgt in Ihrem CSS-Stil.