什麼是 CSS 自訂屬性（變數）以及雙破折號前綴如何運作？

了解以雙破折號為前綴的自訂CSS 屬性

在您提供的程式碼片段中，您遇到了以雙破折號( --) 為前綴的CSS 屬性，例如--color-link 和--font-thin。這些屬性屬於一組 CSS 自訂屬性，這些屬性是使用者定義的屬性，可在 CSS 樣式中提供更大的靈活性和自訂性。

根據自訂屬性的W3C 規範，這些雙破折號前綴的屬性使用以下語法定義：

--<property-name>: <value>;</value></property-name>

其中--property-name 是自訂屬性的名稱，是自訂屬性的名稱。是該屬性的所需值。

自訂屬性有多種用途：

• 風格彈性：它們允許跨多個元素輕鬆修改CSS 屬性，減少冗餘聲明的需要。
• 主題管理：可以使用自訂屬性來定義特定於主題的變量，簡化了不同主題之間切換的過程。
• 變數替換：它們允許使用變數作為其他 CSS 屬性的值，從而提高樣式的靈活性。

使用 var() 函數，您可以存取其他 CSS 宣告中的自訂屬性的值。例如，在以下程式碼中，#foo h1 元素的color 屬性設定為--main-color 自訂屬性的值：

#foo h1 {
  color: var(--main-color);
}

參考資訊

• [W3C自訂屬性規格](https://www.w3.org/TR/css-variables/)
• [MDN Web 文件：CSS 自訂屬性](https://developer.mozilla.org/ en-US/ docs/Web/CSS/Using_CSS_custom_properties)
• [CSS技巧：關於自訂的一切屬性](https://css-tricks.com/custom-properties-all-the-things/)

以上是什麼是 CSS 自訂屬性（變數）以及雙破折號前綴如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！