CSS函數(shù)定義變量 CSS（層疊樣式表）中的變量可以讓您在整個樣式表中重復使用相同的值，他們是一種CSS的擴展。但是，CSS變量的值是不可更改的，一旦定義，只能在整個樣式表中使用相同的值。 CSS變量定義使用var()函數(shù)定義。這樣，我們可以在需要使用值的地方調(diào)用此函數(shù)。 下面是變量在css中的使用，這個例子中我們定義了一個顏色變量：

:root {
--mainColor: #32a1ff;
}
p {
color: var(--mainColor);
}

使用變量來指定顏色時，“var()”函數(shù)用于調(diào)用我們在“:root”選擇器中定義的變量“--mainColor”。 您可以在樣式表的任何地方使用“:root”偽類選擇器，它表示文檔的根元素。 變量作用域 讓我們看一下變量的作用域。CSS變量是有效的在定義它們的塊（被大括號包含的CSS代碼塊）中以及在這些塊的子塊中。 在這個例子中,我們定義了兩個變量，其中一個定義在“:root”中，另一個定義在一個類選擇器中：

:root {
--mainColor: #32a1ff;
}
.my-class {
--secondaryColor: #000000;
background-color: var(--secondaryColor);
}
p {
color: var(--mainColor);
background-color: var(--secondaryColor);
}

在這個例子中，“background-color”屬性使用“--secondaryColor”變量定義。 這個變量在“.my-class”選擇器中定義。 可以應(yīng)用“--secondaryColor”變量的選擇器包括其定義范圍之內(nèi)定義的所有選擇器（如上面的“.my-class”），以及所有包含“--secondaryColor”定義范圍的選擇器（如上面的“p”選擇器）。 變量優(yōu)先級 當一個元素定義使用多個變量的屬性時 ，哪一個變量優(yōu)先級更高呢？ CSS的規(guī)則是在同一個作用域內(nèi)從元素實例開始向外查找，查找是否定義了一個給定的變量。 最近的定義優(yōu)先級最高，并且直接在定義變量的選擇器中定義的變量優(yōu)先級高于其他選擇器中定義的變量。 最后，還有一個在“var()”函數(shù)內(nèi)可以使用的可選參數(shù)，表示如果遇到未定義的CSS變量，應(yīng)使用的默認值。