css - css 変数を var() にラップする必要があるのはなぜですか?

Question

私は新しいcss-variables構文について学んでいますが、なぜvar変数の周りにステートメントを配置する必要があるのか​​ 疑問に思っています:

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

私が見る限り、変数をそのまま入れても曖昧さはありません。

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

2 番目のオプションが機能しないのはなぜですか? 特にcalc.

UPD。これは、なぜ現在のデザインが開発されたのかという問題です。たとえば、LESS と SASS を使用すると、変数を なしで配置できますvar()。それで、CSS が を使用する原因となったトレードオフについて聞きたいvar()です。

この提案に関する議論は、公開情報源で見つかりませんでした。それへのリンクも大歓迎です。