CSS 變量（自定義屬性）通過(guò) -- 開(kāi)頭定義，如 --main-color: #333;，可在 CSS 中動(dòng)態(tài)引用和修改，適合主題切換和樣式管理。1. 定義變量通常在 :root 或特定元素中，如 :root { --main-color: #333; }；2. 使用時(shí)通過(guò) var(--變量名)，如 color: var(--main-color)；3. 可設(shè)置默認(rèn)值防止出錯(cuò)，如 var(--main-color, #000)；常見(jiàn)用途包括：1. 主題色統(tǒng)一管理，通過(guò)切換變量實(shí)現(xiàn)風(fēng)格變化；2. 避免重復(fù)代碼，集中管理顏色、間距等值；3. 動(dòng)態(tài)更新樣式，結(jié)合 JavaScript 修改變量實(shí)現(xiàn)交互效果；注意事項(xiàng)有：作用域影響變量生效范圍，子元素可覆蓋父級(jí)變量；不能拼接字符串，需直接寫(xiě)完整值；兼容性良好，主流瀏覽器支持但不適用于 IE。

用 CSS 變量（自定義屬性）其實(shí)挺方便的，特別是在做大項(xiàng)目或者需要頻繁調(diào)整樣式的時(shí)候。它不像普通的變量那樣只能在預(yù)處理器里用，而是原生支持，寫(xiě)起來(lái)也更靈活。

什么是 CSS 變量？

CSS 變量，也叫自定義屬性，是通過(guò) -- 開(kāi)頭定義的屬性，比如 --main-color: #333;。它們可以在整個(gè) CSS 文件中被引用，而且可以動(dòng)態(tài)修改，非常適合做主題切換、顏色管理這些事情。

你一般會(huì)在 :root 里面定義全局變量，也可以在某個(gè)具體的元素里定義局部變量，這樣只影響那個(gè)部分。例如：

:root {
  --main-color: #333;
}

.header {
  --main-color: #f00;
}

怎么使用 CSS 變量？

使用方式很簡(jiǎn)單，就是用 var(--變量名) 的形式。比如你想設(shè)置文字顏色為主色調(diào)，就可以這樣寫(xiě)：

p {
  color: var(--main-color);
}

有幾個(gè)小細(xì)節(jié)要注意：

• 如果變量沒(méi)定義，瀏覽器會(huì)忽略這個(gè)值，可能造成樣式異常。
• 你可以給 var() 加一個(gè)默認(rèn)值，比如 var(--main-color, #000)，這樣萬(wàn)一變量不存在還能兜底。

常見(jiàn)用途和建議

1. 主題色統(tǒng)一管理

很多項(xiàng)目都會(huì)有一套主色調(diào)，用變量來(lái)集中管理特別合適。比如你有一個(gè)深色主題和淺色主題，只需要改幾個(gè)變量就能切換整體風(fēng)格。

:root {
  --bg-color: #fff;
  --text-color: #333;
}

.dark-theme {
  --bg-color: #111;
  --text-color: #eee;
}

2. 避免重復(fù)代碼

如果你的 CSS 中有很多重復(fù)的顏色、間距值，用變量可以減少冗余。比如按鈕的 padding 或者邊框圓角：

:root {
  --btn-padding: 12px 24px;
  --btn-radius: 8px;
}

3. 動(dòng)態(tài)更新樣式的場(chǎng)景

可以用 JavaScript 動(dòng)態(tài)修改變量值，實(shí)現(xiàn)一些交互效果。比如點(diǎn)擊按鈕換背景色：

document.documentElement.style.setProperty('--bg-color', '#ff0');

注意事項(xiàng)和常見(jiàn)問(wèn)題

• 作用域要搞清楚：變量在哪個(gè)元素下定義，就在哪里生效。:root 是全局，子元素可以覆蓋父級(jí)變量。
• 不能拼接字符串：比如你寫(xiě)了一個(gè)字體大小是 --font-size: 16;，然后想用 font-size: var(--font-size)px; 這樣是不行的，得直接寫(xiě)成 --font-size: 16px;。
• 兼容性基本沒(méi)問(wèn)題了：主流現(xiàn)代瀏覽器都支持，但如果你還在支持 IE，那這套就不適用了。

基本上就這些。掌握好變量的定義、調(diào)用和作用域，再結(jié)合實(shí)際需求去組織變量結(jié)構(gòu)，你會(huì)發(fā)現(xiàn)寫(xiě) CSS 更輕松了。

以上是使用CSS變量（自定義屬性）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！