什麼是 CSS 自訂屬性（使用雙破折號）？

揭開神秘的雙破折號CSS 屬性

在CSS 領域，出現了一種特殊的語法，使用雙前導破折號（- -) 為屬性名稱加上前綴。這種神秘的符號讓許多開發人員感到困惑，讓他們絞盡腦汁尋找答案。

不要害怕，因為這種神祕的現象蘊藏著深刻的秘密。這些神秘的屬性，也稱為自訂屬性，是釋放 CSS 變數威力的關鍵。透過在根元素中聲明自訂屬性（如提供的範例程式碼所示），您可以在整個樣式表中定義和重複使用值。

CSS 標準為此變革性功能提供了全面的指南。根據 W3C 規格頁面，自訂屬性由兩部分組成：

1. 變數宣告： 這是您為自訂屬性指派值的位置。在根元素中聲明後，它可用於所有嵌套元素。
2. 變數用法： 要使用定義的自訂屬性，只需使用 var() 函數來引用它。這允許您將屬性的值應用於 CSS 程式碼中的任何選擇器。

例如，請考慮以下範例：

:root {
  --main-color: #05c;
  --accent-color: #056;
}

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

在此場景中，自訂屬性 - -main-color 在根元素中定義。現在可以使用 var(--main-color)將此值套用至 #foo h1 選擇器的顏色屬性。

自訂屬性提供了一系列好處，包括改進的程式碼可重用性、更輕鬆的主題切換以及增強封裝。透過採用這項強大的功能，您可以將 CSS 開發的優雅和效率提升到一個新的水平。

以上是什麼是 CSS 自訂屬性（使用雙破折號）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！