在使用CSS變量的時候, 應該知道的三個主要內容

• 自定義屬性
• var()函數
• :root偽類

一, 自定義屬性

我們可以將重復使用的屬性定義成自定義屬性, 這樣在以後需要修改的時候, 只需要修改自定義屬性裏的屬性值就可以了.

:root {

　　--textColor: #444;

}

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

二, var()函數

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

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

p {

　　color: var(--textColor);

}

要設置p標簽的字體顏色, 可以像上面代碼那樣寫

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

三, root偽類

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

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

body {

　　--bgColor: red;

}

.content {

　　--textColor: blue;

}

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

如何在CSS中使用變量