Warum müssen wir css-Variablen in var() umbrechen?

Question

ich über neue css-variables Syntax lerne und ich frage mich, warum müssen wir var Aussage um variabel setzen:

.button { 
    background-color: var(--bg-color); 
} 

Soweit ich sehe, gibt es keine jede Zweideutigkeit, wenn Sie wie es Variable gesetzt wird ist

.button { 
    background-color: --bg-color; 
} 

Warum funktioniert die zweite Option nicht? Ich möchte es wirklich verwenden, weil es viel sauberer aussieht, vor allem mit calc.

UPD. Dies ist eher eine Frage, warum das aktuelle Design entwickelt wurde. Zum Beispiel können Sie mit LESS und SASS Variablen ohne var() setzen. Daher würde ich gerne etwas über Kompromisse erfahren, die CSS veranlasst haben, var() zu verwenden.

Konnte keine Diskussion über diesen Vorschlag in öffentlichen Quellen finden. Alle Links dazu werden ebenfalls geschätzt.

Answer 1

Dies liegt daran, dass var() eine Funktion ist, die den Wert der Variablen abruft.

See: var() on MDN