這是我的 CSS 變量帖子的后半部分，前半部分在這里。
在本文中，我們將研究 var() 的詳細(xì)信息。還有兩個很酷的例子：

• 使用 CSS 變量的動畫
• 帶有系統(tǒng)設(shè)置檢測功能的純 CSS 深色模式切換

使用 var()

var() 訪問自定義屬性值（CSS 變量）。其語法如下：

var( <custom-property-name>, <fallback-value>? )

基本規(guī)則

1. 第一個參數(shù)必須是 CSS 變量：直接值，例如 var(20px)，將導(dǎo)致錯誤，因?yàn)?var() 只接受自定義屬性名稱。

2. var() 無法替換屬性名稱： 換句話說，你不能寫類似 var(--prop-name): 20px; 的內(nèi)容。因?yàn)?var() 僅限于在屬性值中使用。
   

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

詳細(xì)行為

1. var(--b,fallback_value) Fallbacks:第二個參數(shù)充當(dāng)后備值，當(dāng) --b 無效時使用。

2. var(--c,) 具有空回退的語法： 如果回退值保留為空，則語法保持有效，并且如果 --c 無效，則默認(rèn)為空值.

3. 多個逗號： 在 var(--d, var(--e), var(--f), var(--g)) 中，第一個逗號之后的所有內(nèi)容都是被視為后備，因此如果 --d 無效，則 var() 表達(dá)式會將 var(--e)、var(--f)、var(--g) 作為后備進(jìn)行計算，以確定結(jié)果。

4. var() 作為完整的 CSS 令牌： 該函數(shù)充當(dāng)完整的 CSS 令牌，就像 20px 一樣。因此，var(--size)var(--unit)不會創(chuàng)建20px并被視為無效。

5. 將initial與CSS變量一起使用：將initial分配給CSS變量意味著它是無效的。要將初始值顯示為值，必須將其放置在后備中。

6. url() 和 var() 用法： 由于 url() 被視為完整的 CSS 令牌，因此您需要在變量中定義完整的 url()。
   

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

可變分辨率和范圍

CSS 變量與其他 CSS 屬性一樣，遵循 CSS 特定的范圍和特異性規(guī)則。了解這些因素如何影響 CSS 變量可以進(jìn)行更精確的控制。

全局變量和作用域變量：
:root 中定義的變量是全局應(yīng)用的，而選擇器中定義的變量則具有更有限的范圍。

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

具體優(yōu)先級：
CSS 變量的較高特異性將覆蓋較低特異性。

var( <custom-property-name>, <fallback-value>? )

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

在此示例中，.box 的背景顏色保持白色，因?yàn)樵谥匦露x .box 之前 --background 已解析為 rgb(255, 255, 255) --green: 0。

使用偽類重新評估變量：
當(dāng)在同一級別定義時，變量會根據(jù)偽類狀態(tài)而變化。

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

---

接下來，讓我們探索 CSS 變量的一些高級用例：

用法示例 A：動畫

CSS 變量不能直接動畫，因?yàn)闉g覽器無法推斷數(shù)據(jù)類型。要解決此問題，請使用 @property 定義變量的類型和初始值，使瀏覽器能夠了解如何為變量設(shè)置動畫。

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

   :root {
     --main-color: blue;
   }

   .section {
     --main-color: green; /* Overrides :root definition */
   }

   .section p {
     color: var(--main-color); /* Shows green */
   }

   p {
     color: var(--main-color); /* Shows blue */
   }

添加與系統(tǒng)偏好設(shè)置一致的手動切換

雖然系統(tǒng)設(shè)置默認(rèn)控制主題，但我們可能希望為用戶提供手動在淺色和深色主題之間切換的選項(xiàng)。為此，我們可以添加一個復(fù)選框來切換狀態(tài)。理想情況下，當(dāng)選中該復(fù)選框時，它表示深色模式，當(dāng)取消選中時，它表示淺色模式。

但是，CSS 無法自動檢測系統(tǒng)設(shè)置并相應(yīng)地更改復(fù)選框狀態(tài)，尤其是在深色模式下。為了解決這個限制，我們可以使用 CSS 變量和 :has() 選擇器來根據(jù)復(fù)選框狀態(tài)控制主題切換。

我想嘗試完全使用 CSS 來實(shí)現(xiàn)此目的，但由于用戶的系統(tǒng)可能設(shè)置為淺色或深色模式，因此僅靠 CSS 無法自動選中深色模式下的復(fù)選框。

如果我們移不動山，我們就修路。解決方法如下：

• 我們將使用 CSS 創(chuàng)建一個切換開關(guān)，其中視覺“OFF”狀態(tài)代表淺色模式，“ON”代表深色模式。

• 當(dāng)系統(tǒng)設(shè)置為燈光模式時：當(dāng)復(fù)選框未選中時，對應(yīng)“OFF”狀態(tài)（燈光模式）。選擇后，對應(yīng)“ON”狀態(tài)（深色模式）。

• 當(dāng)系統(tǒng)設(shè)置為深色模式時：由于系統(tǒng)偏好反轉(zhuǎn)，視覺狀態(tài)也會反轉(zhuǎn)。當(dāng)取消選中該復(fù)選框時，它對應(yīng)于“ON”（深色模式）。選擇后，對應(yīng)“OFF”（燈光模式）。

要實(shí)現(xiàn)這個效果，我們需要兩個主要元素：

第一：根據(jù)系統(tǒng)設(shè)置和復(fù)選框狀態(tài)更改的變量

var( <custom-property-name>, <fallback-value>? )

第二：根據(jù)選中狀態(tài)和開/關(guān)表示的系統(tǒng)設(shè)置切換行為

淺色和深色模式 CSS 屬性會根據(jù)系統(tǒng)設(shè)置而顛倒。

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

使用 CSS 變量技巧簡化變量設(shè)置

這里我們將使用 Space Toggle 技術(shù)來簡化變量設(shè)置。這是代碼，后面是其工作原理的解釋：

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

這里的關(guān)鍵在于 --background-color: var(--light, #fbfbfb) var(--dark, #121212); 行。這里，背景顏色取決于 --light 和 --dark 的值，有效地模擬屬性中的 if/else。

它是如何工作的？最初，--light: var(--ON);和--ON：初始；使 --ON 成為無效狀態(tài)。同時，--OFF 設(shè)??置為空字符串。當(dāng)應(yīng)用于 var(--light, #fbfbfb) var(--dark, #121212) 時，無效的 --light 變量將默認(rèn)為 #fbfbfb，有效的 --dark 變量（空）允許 --background-color等于#fbfbfb。

所有其他顏色變量都遵循相同的邏輯，根據(jù) --light 和 --dark 的狀態(tài)進(jìn)行調(diào)整。這樣，每個顏色變量只需要定義一次。

切換狀態(tài)變得簡單。如果深色模式處于活動狀態(tài)，請使用 --light: var(--OFF);和 --dark: var(--ON);。在燈光模式下，反轉(zhuǎn)它們。雖然不是很直觀，但這種方法目前對于 CSS 來說是最有效的。如果有更好的解決方案，值得探索。

完整示例：CodePen 示例

---

概括

CSS 不斷發(fā)展，自 2016 年以來 CSS 變量在主要瀏覽器中可用。@property 和 :has() 等新功能進(jìn)一步擴(kuò)展了 CSS 變量的靈活性。與其他新工具相結(jié)合，CSS 變量變得更加強(qiáng)大 - 例如，它們現(xiàn)在可以增強(qiáng)滾動驅(qū)動的動畫以創(chuàng)建視覺動態(tài)效果。作為 CSS 中存儲狀態(tài)的核心元素，就像任何編程語言中的變量一樣，對 CSS 變量的深入理解對于將來更復(fù)雜的樣式和設(shè)計來說是非??常寶貴的。

---

參考

• https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url/42331003#42331003
• https://kizu.dev/circular-toggles/#was-this-always-possible
• https://dev.to/afif/what-no-one-told-you-about-css-variables-553o
• https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9
• https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

以上是CSS 變量的驚人細(xì)節(jié) - 使用 var() 和很酷的示例的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！