So verwenden Sie einheitenlose CSS-Variablen mit Flexibilität

Einheitenlose CSS-Variablen bieten die Möglichkeit, numerische Werte zu speichern, die bequem in einem Stylesheet verwendet werden können . Es kann jedoch vorkommen, dass Sie dieselbe Variable in unterschiedlichen Kontexten verwenden möchten und unterschiedliche Einheiten wie Prozentsätze oder Pixel erfordern.

Ein Beispiel für dieses Dilemma wäre das Festlegen einer CSS-Variablen mit dem Wert 10 In einem Fall muss es als Prozentsatz und in einem anderen Fall als einfache Zahl für Berechnungen verwendet werden.

Die Lösung liegt in der Verwendung der Funktion calc(). Indem wir eine einfache Multiplikation der Variablen mit der gewünschten Einheit innerhalb der Funktion calc() durchführen, können wir die erforderliche Flexibilität erreichen.

Zum Beispiel um die Variable --mywidth mit einem Wert von 10 in einen Prozentsatz umzuwandeln , verwenden Sie einfach:

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

Dies führt dazu, dass die width-Eigenschaft genau wie beabsichtigt auf 10 % gesetzt wird .

Die Vielseitigkeit dieses Ansatzes erstreckt sich auf verschiedene Einheiten, sodass Sie nahtlos zwischen Prozentsätzen, Pixeln oder anderen erforderlichen Maßeinheiten innerhalb desselben Stylesheets wechseln können.

Um dies zu veranschaulichen, bedenken Sie Folgendes: das folgende Code-Snippet:

: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 wird die Variable --a verwendet, um verschiedene Eigenschaften zu definieren, einschließlich Breite, Rahmen, Hintergrund und Abstand. Durch die Verwendung von Einheiten innerhalb der calc()-Funktion kann jede Eigenschaft dynamisch basierend auf dem in --a gespeicherten Wert angepasst werden.