何為css變量
- 隨著各種css預(yù)編譯工具sass,less,stylus的逐漸流行,css中引入變量已經(jīng)成為一種趨勢,因此原生(不知道能否用這個詞,權(quán)當(dāng)是css本身好了)css也加入了變量的定義方式
優(yōu)點
- 在編寫css過程中使用變量無非是希望能使用通用的樣式,提高性能,降低維護成本
- 在更改樣式的時候,我們可以統(tǒng)一修改而無需一個個的去更改樣式,十分方便
語法
- css中原生變量定義是通過
--前綴來實現(xiàn),后面可以自定義變量名稱 - 使用方式:
var(--name),這里的name就是自定義的變量名稱 - 注意: 變量可以以數(shù)字開頭,但不能包含
$[^(%等字符,它還有一個強大之處是甚至可以直接使用中文定義變量名稱 - 它也有自己的作用域,就像js中的塊級作用域一樣,大家自行揣摩一下它的作用方式
- 如果遇到了不合法的變量,css會自動使用默認(rèn)的值代替
- 為了防止變量未定義,可以使用默認(rèn)值:
var(--name,value)
實戰(zhàn)
-
自己定義變量自己使用(這里使用了中文)
div { --綠色:green; background: var(--綠色); height: 100px; width: 100px; }運行效果
效果圖 -
上層定義,下層使用(這里通過
:root偽類定義了全局css變量):root { --紅色:red; } div { background: var(--紅色); height: 100px; width: 100px; }運行效果
在這里插入圖片描述 -
上層和自己都定義了,會怎么顯示?
:root { --紅色:red; } div { --紅色:green; background: var(--紅色); height: 100px; width: 100px; }
運行效果
在這里插入圖片描述
可以看到自己定義的變量覆蓋了全局的變量
-
默認(rèn)值的使用(不定義變量,看看會有什么結(jié)果)
div { background: var(--紅色,yellow); height: 100px; width: 100px; }
運行效果
在這里插入圖片描述
可以看到使用了默認(rèn)的yellow
-
錯誤的變量內(nèi)容
div { --紅色:20px; background: var(--紅色,yellow); height: 100px; width: 100px; }運行效果....
如你所見,一片空白.
這是因為定義的變量不能用于background,而又因為變量確實存在,所以默認(rèn)值也不會生效,只是會使用默認(rèn)的缺省值來代替,也就是transparent,所以會出現(xiàn)空白格現(xiàn)象
結(jié)語
- 這個知識點是今天學(xué)習(xí)JavaScript30天練習(xí)的時候發(fā)現(xiàn)的,目前只能理解這么多,如果想要了解更多,煩請去參看業(yè)界大神的文章
- 對JavaScript30天練習(xí)感興趣的可以到這個鏈接,它可以幫助你提升原生js能力
- JavaScript30官網(wǎng)
- 也可以通過git clone https://github.com/soyaine/JavaScript30.git 來直接將項目拉到本地進行練習(xí)
- 感謝閱讀,如有錯誤,請指正
