示例:
:root {
 --bg-color: #3a3a3a;
}
body {
 background-color: var(--bg-color);
}
var()
	
var()函數(shù)用于插入CSS變量的值。
	
:root
:root是一個偽類,表示文檔根元素,非IE及ie8及以上瀏覽器都支持,在:root中聲明相當(dāng)于全局屬性,只要當(dāng)前頁面引用了:root segment所在文件,都可以使用var()來引用
	
傳統(tǒng)方式:
	
以下示例顯示了在樣式表中定義某些顏色的傳統(tǒng)方式(通過為每個特定元素定義要使用的顏色):
	
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
 color: #1e90ff;
 background-color: #ffffff;
 padding: 15px;
}
button {
 background-color: #ffffff;
 color: #1e90ff;
 border: 1px solid #1e90ff;
 padding: 5px;
}
var()函數(shù)的語法
	
:root {
 --blue: #1e90ff;
 --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
 color: var(--blue);
 background-color: var(--white);
 padding: 15px;
}
button {
 background-color: var(--white);
 color: var(--blue);
 border: 1px solid var(--blue);
 padding: 5px;
}
var()函數(shù)的語法
	
該var()函數(shù)用于插入CSS變量的值。
	
該var()函數(shù)的語法如下:
	
var(name, value)
	
注意:變量名必須以兩個破折號(-)開頭,并且區(qū)分大小寫!
	
var()如何工作
	
首先:CSS變量可以具有全局范圍或局部范圍。
	
全局變量可以在整個文檔中訪問/使用,而局部變量只能在聲明它的選擇器內(nèi)部使用。
	
要創(chuàng)建具有全局作用域的變量,請?jiān)?root 選擇器中聲明它。在:root選擇文檔的根元素相匹配。
	
要創(chuàng)建具有局部作用域的變量,請?jiān)趯⒁褂盟倪x擇器中聲明它。
	
下面的示例與上面的示例相同,但是在這里我們使用該var()函數(shù)。
	
首先,我們聲明兩個全局變量(–blue和–white)。然后,我們使用該 var()函數(shù)稍后在樣式表中插入變量的值
	
使用var()的優(yōu)點(diǎn)是:
	
使代碼更易于閱讀(更易于理解)
使更改顏色值更加容易
要將藍(lán)色和白色更改為較柔和的藍(lán)色和白色,您只需要更改兩個變量值