CSS 自定義屬性是現(xiàn)代 CSS 中非常有用的功能，它允許開(kāi)發(fā)者在樣式表中創(chuàng)建可重用的值，從而提高樣式表的可維護(hù)性和靈活性。通過(guò) var() 函數(shù)，可以在 CSS 中定義變量，并在多個(gè)地方引用這些變量，甚至可以實(shí)現(xiàn)動(dòng)態(tài)改變樣式的效果。
因項(xiàng)目需要，做了一個(gè)主題切換，主題樣式都是通過(guò)定義var()變量改變：
1. 什么是 CSS 自定義屬性（變量）？
CSS 自定義屬性是允許我們定義變量的功能，這些變量可以在 CSS 中的任何位置使用。與 JavaScript 中的變量不同，CSS 變量的作用域是基于 DOM 結(jié)構(gòu)的。換句話說(shuō)，變量可以被局部或全局使用，這取決于它們的聲明位置。與傳統(tǒng)的 CSS 樣式表中直接寫死的值不同，自定義屬性可以在多個(gè)地方被引用和修改。CSS 自定義屬性的定義以 -- 開(kāi)頭，且必須以 var() 函數(shù)來(lái)引用。
CSS 變量的聲明語(yǔ)法如下：
:root {
--main-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-color);
font-size: var(--font-size);
}
在上面的例子中，--main-color 和 --font-size 是 CSS 自定義屬性（變量），它們分別代表主色和字體大小。通過(guò) var() 函數(shù)，我們?cè)?nbsp;body 元素中引用了這兩個(gè)變量。
2. 如何定義和使用 CSS 變量？
2.1 定義 CSS 變量
CSS 變量的定義通常在 :root 選擇器中進(jìn)行，這樣可以確保它們?cè)谌址秶鷥?nèi)有效。-- 是定義自定義屬性的前綴。
:root {
--primary-color: #1abc9c;
--secondary-color: #2ecc71;
--font-family: 'Arial', sans-serif;
}
在這里，我們定義了三個(gè)變量：--primary-color、--secondary-color 和 --font-family，分別表示主色、副色和字體。
2.2 使用 var() 函數(shù)引用變量
一旦定義了 CSS 變量，就可以通過(guò) var() 函數(shù)在任何需要的地方引用它們。
body {
background-color: var(--primary-color);
font-family: var(--font-family);
}
h1 {
color: var(--secondary-color);
}
在這個(gè)例子中，background-color 和 font-family 使用了自定義變量，h1 元素使用了 --secondary-color 變量來(lái)設(shè)置顏色。
3. CSS 變量的作用域
CSS 變量是層疊的，這意味著它們的作用域是基于 DOM 結(jié)構(gòu)的。變量的作用域可以是全局的，也可以是局部的。
3.1 全局作用域
當(dāng)在 :root 中定義變量時(shí)，它們是全局的，可以在整個(gè)項(xiàng)目中使用。
:root {
--global-color: #ff6347;
}
div {
color: var(--global-color);
}
p {
color: var(--global-color);
}
3.2 局部作用域
如果在特定的選擇器中定義了變量，它們只會(huì)在該選擇器內(nèi)部生效。
.container {
--local-color: #ff6347;
}
.container p {
color: var(--local-color);
}
.container .title {
color: var(--local-color);
}
在上面的例子中，--local-color 僅在 .container 元素內(nèi)有效，其他地方無(wú)法訪問(wèn)。
4. CSS 變量的默認(rèn)值
聲明了 CSS 自定義屬性之后，在使用 var() 時(shí)，可以為變量提供一個(gè)默認(rèn)值，如果該變量未定義或者無(wú)法找到時(shí)，CSS 會(huì)使用這個(gè)默認(rèn)值。這可以防止頁(yè)面渲染時(shí)因缺少變量而導(dǎo)致的錯(cuò)誤。var() 函數(shù)接受兩個(gè)參數(shù)：
- 必需的參數(shù)：引用 CSS 變量名。
- 可選的默認(rèn)值：如果變量未定義或不可用，使用此默認(rèn)值。
div {
color: var(--undefined-color, #333);
}
在這個(gè)例子中，如果 --undefined-color 沒(méi)有定義，color 屬性會(huì)使用默認(rèn)的 #333 值。
5. 動(dòng)態(tài)改變 CSS 變量
CSS 變量不僅可以在靜態(tài)樣式表中使用，還可以在 JavaScript 中動(dòng)態(tài)地修改。這使得開(kāi)發(fā)者可以通過(guò) JavaScript 實(shí)現(xiàn)動(dòng)態(tài)主題切換、響應(yīng)式設(shè)計(jì)和交互式樣式調(diào)整等功能。
5.1 在 JavaScript 中修改 CSS 變量
可以通過(guò) style.setProperty() 方法動(dòng)態(tài)更改 CSS 變量。
document.documentElement.style.setProperty('--primary-color', '#9b59b6');
這行代碼會(huì)把全局變量 --primary-color 的值修改為 #9b59b6。
或者CSS修改(鼠標(biāo)移入按鈕，改變變量)
button:hover {
--primary-color: #3498db;
}
5.2 實(shí)現(xiàn)主題切換
例如，通過(guò) JavaScript 和 CSS 變量，你可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的主題切換功能。
<button onclick="toggleTheme()">切換主題</button>
<style>
:root {
--background-color: white;
--text-color: black;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
</style>
<script>
function toggleTheme() {
const currentBackground = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
if (currentBackground === 'white') {
document.documentElement.style.setProperty('--background-color', '#333');
document.documentElement.style.setProperty('--text-color', '#fff');
} else {
document.documentElement.style.setProperty('--background-color', 'white');
document.documentElement.style.setProperty('--text-color', 'black');
}
}
</script>
點(diǎn)擊按鈕后，toggleTheme() 函數(shù)會(huì)動(dòng)態(tài)切換 --background-color 和 --text-color 變量，從而實(shí)現(xiàn)白天/黑夜主題的切換。
6. CSS 變量的繼承、計(jì)算和媒體查詢使用
CSS 變量支持繼承和計(jì)算，可以利用數(shù)學(xué)表達(dá)式來(lái)操作變量的值，增強(qiáng)樣式的靈活性。
6.1 繼承
當(dāng)一個(gè)元素沒(méi)有定義某個(gè) CSS 變量時(shí)，它會(huì)從父元素繼承該變量的值。
:root {
--base-padding: 10px;
}
.container {
padding: var(--base-padding);
}
.card {
padding: var(--base-padding);
}
6.2 計(jì)算
可以在 CSS 變量中使用計(jì)算，比如通過(guò) calc() 函數(shù)來(lái)計(jì)算尺寸。
:root {
--base-size: 20px;
}
.element {
width: calc(var(--base-size) * 2);
height: calc(var(--base-size) + 10px);
}
在上面的例子中，--base-size 被用在 calc() 函數(shù)中進(jìn)行計(jì)算，產(chǎn)生更靈活的布局。
6. 3 CSS 變量與媒體查詢結(jié)合使用
CSS 變量非常適合和媒體查詢一起使用，能夠幫助你輕松地創(chuàng)建響應(yīng)式設(shè)計(jì)。你可以在不同的屏幕尺寸下，修改變量的值以實(shí)現(xiàn)不同的布局或主題。
:root {
--font-size: 16px;
}
body {
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--font-size: 14px;
}
}
7. 兼容性
CSS 自定義屬性在現(xiàn)代瀏覽器中有很好的支持，包括 Chrome、Firefox、Safari、Edge 等，但在 IE11 及以下版本中并不支持。若要兼容舊版瀏覽器，可能需要使用其他方式來(lái)處理變量，或者考慮提供兼容的樣式（如利用 PostCSS 或 Sass 編譯器）。
瀏覽器支持：
- Chrome：支持
- Firefox：支持
- Safari：支持
- Edge：支持
- Internet Explorer：不支持
8. 總結(jié)
CSS 自定義屬性var()函數(shù)是 CSS 中強(qiáng)大的工具，它使得開(kāi)發(fā)者可以更加靈活地管理樣式、提高代碼的可維護(hù)性，并且可以通過(guò) JavaScript 動(dòng)態(tài)修改樣式。通過(guò)合理使用 CSS 變量，我們能夠更高效地組織樣式代碼，輕松實(shí)現(xiàn)主題切換和響應(yīng)式設(shè)計(jì)等功能。
關(guān)鍵點(diǎn)總結(jié)：
- 變量通過(guò)
-- 定義，在 var() 中引用。 - 可以使用全局和局部作用域。
- 可以為變量提供默認(rèn)值。
- 可以通過(guò) JavaScript 動(dòng)態(tài)修改變量值。
- 支持繼承和計(jì)算，增加了樣式表的靈活性。
- 避免重復(fù)代碼，提高樣式的復(fù)用性。
- 使代碼更具可維護(hù)性，尤其是在大型項(xiàng)目中。
借助 CSS 變量，前端開(kāi)發(fā)將變得更加靈活、簡(jiǎn)潔，維護(hù)和擴(kuò)展樣式表也變得更加容易。
?轉(zhuǎn)自https://juejin.cn/post/7468144197293867043
該文章在 2025/5/16 10:19:20 編輯過(guò)
400 186 1886
