CSS変数のCSS calc（）の動作

Question

CSS変数を設定する際にcalc（）を使用する動作が不思議です。

例：

#test { 
    --halfWidth: calc(100%/2); 
} 

は今、#test要素ならば、私は--halfWidth変数が250ピクセルに設定することを希望、divは、広い500pxなどだったと言います。

しかし、他の場所で使用されているvar(--halfWidth)コードでは、250pxの代わりにcalc(100%/2)文字列が表示されます。つまり、要素Aの幅の半分ではなく、要素Bの幅の半分として単にwidth: var(--halfWidth);を設定するだけなので、要素Aの計算を使用して後で要素Bで使用することはできません。が定義された。

私はこの動作のドキュメントを探すためにウェブを精査しましたが、これまで空白が描かれています。

理想的には、2つのバリエーションで利用可能であるべきCALCを使用してCSS変数を設定：

-されると、いずれかに、文字列変数の置換をバー単に文字列に落下、ちょうどこの例のように働いて

1. 一つの変種。
2. 2番目の変種では、calc（）は単純に文字列を置き換えるのではなく、計算結果を返します。

これを行うには？むしろ実際の実装をそれに適した人に任せておきたいと思いますが、1つの可能性はeval()のようなものでしょう。 eval(calc(100%/2))のように結果は250pxとなります。

とにかく、誰かがこの動作に関する実際のドキュメントを持っている場合や、代わりに上記の例を得て結果を得る方法の解決策があれば、私はすべて耳にします！

編集：ちょうどFYI、私はこれが答え原因答えるためにかかわらず、質問の一種であるhttps://drafts.csswg.org/css-variables/

Answer 1

で仕様を読んだことはできません。

はこのようにそれを実行してください。..それが動作します

あなたが直面している問題は、CSSの通常の動作です。それはスタイルをカスケードします。あなたが達成しようとしているものがうまくいくならば、短い時間の後に本当に乱雑になるでしょう。

私はそれはあなたがVARこの

#test { 
    --halfWidth: calc(100%/2); 
} 

のような変数を定義できることをどのようにクールであることを意味する（ - 半角）は常にcalc(100%/2)でなければなりませんが。親要素の幅の半分になることに注意しましたか？数ヶ月で、プログラマがコードを読み取り、--halfWidthと1000pxセットの幅と箱を持っており、今では私がインターネット接続が壊れていると思うだろう...広い250pxであれば、それは可能だろうか変な想像:)それを

は、500pxワイドでなければなりません。

目的を達成するには、親要素の幅を定義する異なるvarsを定義する必要があります。それを子供達に分けてください。