css可以使用變量。在css中，變量是由CSS作者定義的實體，其中包含要在整個文檔中重復(fù)使用的特定值；使用自定義屬性來設(shè)置變量名，并使用var()函數(shù)來讀取。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

CSS 變量當(dāng)前有兩種形式：

• 變量，就是擁有合法標(biāo)識符和合法的值?？梢员皇褂迷谌我獾牡胤?。可以使用var()函數(shù)使用變量。例如：var(–example-variable)會返回–example-variable所對應(yīng)的值

• 自定義屬性。這些屬性使用–*where*的特殊格式作為名字。例如–example-variable: 20px;即使一個css聲明語句。意思是將20px賦值給–example-varibale變量。

在使用CSS變量的時候, 應(yīng)該知道的三個主要內(nèi)容

• 自定義屬性

• var()函數(shù)

• :root偽類

1、自定義屬性

我們可以將重復(fù)使用的屬性定義成自定義屬性, 這樣在以后需要修改的時候, 只需要修改自定義屬性里的屬性值就可以了.

:root { 　　--textColor: #444; }

上面的代碼就是自定義屬性的寫法, 需要注意的是, 自定義屬性以 — 開頭

3、var()函數(shù)

我們需要使用var()函數(shù)來讀取變量, 否則瀏覽器不知道你的自定義屬性是啥東東.

var()函數(shù)還可以指定第二個屬性, 表示屬性的默認(rèn)值

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

要設(shè)置p標(biāo)簽的字體顏色, 可以像上面代碼那樣寫

它跟 p { color: #444; } 這樣是一樣的

3、root偽類

在說:root偽類之前, 要先說一下CSS自定義屬性的作用域問題

同一個CSS自定義屬性, 可以在多個選擇器中聲明, 讀取的時候, 優(yōu)先級最高的屬性生效.

body { 　　--bgColor: red; } .content { 　　--textColor: blue; }

上面的代碼, -bgColor的作用域是body, –textColor的作用域是.content 由于這個原因, 最好把自定義屬性放在根元素:root里面, 這樣的話能保證任何選擇器都能讀取他們.

（學(xué)習(xí)視頻分享：css視頻教程）