建立 CSS 全域變數：樣式表主題管理
在 CSS 領域，宣告全域變數的概念是一個受歡迎的功能。跨樣式表建立可重複使用值的能力可以實現高效且有組織的主題管理。
依靠預處理器來實現此功能的日子已經一去不復返了。 CSS 自訂屬性（變數）已經出現，提供了該語言的本機解決方案。透過利用 :root 偽元素，開發人員可以定義可在整個樣式表中存取的變數。
設置變量：
通過在:root 元素:
<code class="css">:root {
--primary-color: #b00;
--secondary-color: #4679bd;
--background-color: #ddd;
}</code>使用變量:
定義後，可以在任何CSS 宣告中使用var() 函數呼叫變數：
<code class="css">h1 {
color: var(--primary-color);
background: var(--background-color);
}</code>瀏覽器相容性：
CSS 自訂屬性擁有廣泛的瀏覽器支持，包括：
優點：
示範：
下面是一個示範 CSS 自訂屬性強大功能的實例：
<code class="css">:root {
--text-color: #b00;
--background-color: #4679bd;
}
h1 {
color: var(--text-color);
background: var(--background-color);
}
.text-color {
color: var(--text-color);
}
.background-color {
background: var(--background-color);
}</code><code class="html"><h1>This is a heading</h1> <p class="text-color">This text should be red.</p> <div class="background-color">This box should be blue.</div></code>
以上是如何利用CSS自訂屬性進行高效率的主題管理？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
