Berechnungen mit Variablen in CSS

[DanielDD]

Hallo Leute,

ich habe versucht, ein Layout zu erstellen. Ich habe den Code immer weiter reduziert, um das Problem
einzugrenzen, bis ich zu folgenden, nutzlosen Konstrukt gelangt bin: Damit lässt sich der Fehler gut
vorführen:

:root { --DK1: 500;
        --DK2: var(--DK1) + 0;
}

<div style="width:calc( ( 250000 / var(--DK1)) * 1px);background-color:green">Test 1</div>
<div style="width:calc( ( 250000 / var(--DK2)) * 1px);background-color:blue">Test 2</div>
<div style="width:calc( var(--DK1) * 1px);background-color:red">Test 3</div>
<div style="width:calc( var(--DK2) * 1px);background-color:yellow">Test 4</div>

M.E. müssten alle 4 Balken die gleiche Länge haben, allerdings ist der 4. Balken viel länger als die
drei anderen Balken. Gibt es irgendeine Erklärung dafür?

Mit freundlichen Grüßen,
Daniel

 

[AndreasB]

--DK2: var(--DK1) + 0; funktioniert nicht, da es keine Berechnungen in CSS außerhalb von Funktionen gibt.
Versuche mal --DK2: calc(var(--DK1) + 0);.
In deinem inline Style hast du ja schon calc verwendet.

 

[DanielDD]

Danke. Ich habe es jetzt verstanden. Für andere Neulinge: Meine Deklaration:

--DK2: var(--DK1) + 0;

führt dazu, dass --DK2 mit der Zeichenkette "500 + 0" belegt wird. Wenn dann im
inline der Wert calc( ( 250000 / var(--DK2)) * 1px) berechnet wird, dann wird zunächst
der Ausdruck var(--DK2) durch den Wert der Variablen (also den String "500 + 0")
ersetzt. Es wird also der Wert calc( ( 250000 / 500 + 0) * 1px) berechnet. Dabei
wird zuerst dividiert und dann die 0 addiert, das Endergebnis ist 500px.

Wenn inline der Wert calc( var(--DK2) * 1px) berechnet wird, dann führt die Ersetzung
zu calc( 500 + 0 * 1px), also zu calc(500 + 0px). Das ist wegen inkompatibler Daten-
typen nicht definiert. Wer Wert für width ist ungültig und der Balken geht über die
gesamte Breite.

Es reicht aus, in der Deklaration --DK2: (var(--DK1) + 0); zu schreiben.

DanielDD