在CSS變量CSS calc（）行爲

Question

我很好奇在使用calc（）設置CSS變量的行爲。

實施例：

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

現在，如果#test元件，比方說div，是500像素寬，我想--halfWidth變量被設置爲250像素。

但是，據我所知，var(--halfWidth)其他地方使用的代碼只是在calc(100%/2)字符串中而不是250px。這意味着我不能使用say元素A的計算並稍後在元素B中使用它，因爲它將簡單地將例如width: var(--halfWidth);設置爲元素B的寬度的一半，而不是元素A的寬度的一半，其中變量被定義。

我已經搜遍了網絡，試圖找到有關此行爲的任何文檔，但我至今已經畫出了一個空白。

理想的情況下，設定使用計算應以兩種形式提供一個CSS變量：

1. 一個變種工作就像這個例子，只是在字符串中下探-是，禁止任何字符串變量替換。
2. 第二個變體，其中calc（）將產生計算結果而不是簡單地替換字符串。

如何實現這一目標？我寧願將實際的實施留給適合它的人，但有一種可能性是一種事情;像eval(calc(100%/2))會給出結果250px。

無論如何，如果任何人有任何關於此行爲的真實文檔或解決方案，以獲得上述示例來產生結果，我都是耳朵！

編輯：僅供參考，我在https://drafts.csswg.org/css-variables/

Answer 1

讀取規格這是怎樣的一個，雖然問題的回答引起了答案不會是：

做這樣的..那麼它將工作

您面臨的問題是CSS的正常行爲。它瀑布式樣。如果你試圖達到的效果會在短時間內變得非常混亂。

我的意思是如何的酷是它，你可以這樣定義

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

其中var變量（ - 半角）應始終calc(100%/2)。你注意到它將始終是父元素寬度的一半嗎？

想象那將是多麼奇怪的是，如果在幾個月程序員閱讀你的代碼，並具有盒1000像素鑲有--halfWidth的寬度而現在是250px寬......我認爲，互聯網是打破:)這應該只是500px寬。

爲了實現你想要的，你可以/應該定義不同的變量來定義父元素的寬度。然後把它分解給孩子們。