示例：

: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)建具有全局作用域的變量，請在:root 選擇器中聲明它。在:root選擇文檔的根元素相匹配。

要創(chuàng)建具有局部作用域的變量，請在將要使用它的選擇器中聲明它。

下面的示例與上面的示例相同，但是在這里我們使用該var()函數(shù)。

首先，我們聲明兩個全局變量（–blue和–white）。然后，我們使用該 var()函數(shù)稍后在樣式表中插入變量的值

使用var（）的優(yōu)點(diǎn)是：

使代碼更易于閱讀（更易于理解）

使更改顏色值更加容易

要將藍(lán)色和白色更改為較柔和的藍(lán)色和白色，您只需要更改兩個變量值