CSS 變量默認值：如果尚未設置則設置

Question

我的 Web 組件使用 CSS 變量。

這些變量需要默認值。

它們在許多文件中使用，所以我想提供一次默認值，並且只提供一次。

第一次嘗試使文本變黑。 為什么？

一次提供默認值的正確方法是什么？

 .a { --my-variable: red; } .b { --my-variable: var(--my-variable, blue); }

 <div class="a"> <div class="b"> <span style="color: var(--my-variable);">text</span> </div> </div>

Answer 1

在:root聲明默認值，然后在選擇器中覆蓋。

 :root { --primary-color: red; } * { color: var(--primary-color); border: 1px solid var(--primary-color); padding: 0.25rem; margin: 0; } div { --primary-color: green; } p { --primary-color: blue; }

 <div>HI!</div> &hellip; <p>Bye!</p>

Answer 2

第一次嘗試使文本變黑。 為什么？

因為這個--my-variable: var(--my-variable, blue); 無效，因為您試圖用自身表達相同的變量，這是不允許的，因此瀏覽器將簡單地忽略它。 然后在使用color: var(--my-variable); 顏色將回退到黑色的initial值。

正確的方法是簡單地在上層定義變量，它會被所有元素繼承（就像@kornieff 提供的解決方案）

---

從規范：

自定義屬性幾乎完全不計算，除了它們允許並計算 var() 函數的值。 這可以創建循環依賴，其中自定義屬性使用 var()引用自身，或者兩個或多個自定義屬性每個嘗試相互引用。

對於每個元素，創建一個有向依賴圖，其中包含每個自定義屬性的節點。 如果自定義屬性 prop 的值包含引用屬性 var 的 var() 函數（包括在 var() 的回退參數中），則在 prop 和 var 之間添加一條邊。 邊緣可以從自定義屬性到自身。 如果依賴圖中存在循環，則循環中的所有自定義屬性都必須計算為其初始值（這是一個保證無效的值）。

Answer 3

為了補充之前的答案，可能存在您不想在全局:root范圍內聲明變量的情況。 例如，當您創建可重用組件時，您希望在本地聲明其樣式，而不依賴於全局項目樣式。 特別是如果您正在為其他開發人員構建庫。

在這種情況下，解決方案是向“外部世界”公開一個變量名，並在組件內部使用不同的變量名。 組件容器應該只將可選的外部變量映射到內部變量，並設置其默認值：

.my-component-container {
  /* map optional "external" variables to required "internal" variables */
  --my-variable-inner: var(--my-variable, blue);
}

.my-component-container .my-nested-element {
  color: var(--my-variable-inner);
}

.my-component-container .my-other-nested-element {
  border-color: var(--my-variable-inner);
}

通過這種方式，您可以確保始終在組件中定義--my-variable-inner ，並使外部使用者可以選擇定義--my-variable 。

缺點是你需要記住兩個變量名而不是一個。 但是在這里您可以考慮一些項目范圍的約定，例如為每個變量添加--inner或其他一些后綴。