神秘巨星來了嗎？快，打追光，快，快給她鏡頭。 ------《神秘巨星》

神秘巨星是誰？它就是 CSS Variables 。

簡介

CSS Variables，一個并不是那么新的東西，但對css來說絕對是一場革命。

之前使用變量的時候，需要借助sass、less等預處理工具來實現，現在我們可以直接使用css來聲明變量。

兼容性

老規(guī)矩，先來看下兼容性

兼容性一片綠，紅的那不是還有兩個嗎？做大事怎么能拘小節(jié)呢，讓它咕嚕（gun）一邊去吧。

語法

語法有點難看但很簡單， --* 來聲明變量名， var(--*) 來使用，也許你要問了，為什么使用 -- 不用 $ 一類的呢，唉，那不是sass、less兩個貨用了嗎

聲明和使用必須放在{}代碼塊里

代碼是不是很簡單，可以直接看效果，就不贅述了。

全局變量與變量覆蓋

在 :root 代碼塊里面聲明的變量就是全局變量，并且局部變量會覆蓋全局變量

最后生效的是 --bg-color: lightblue ， bg-color 變量的值也就變成了 lightblue

變量的缺省值

完整的變量使用語法 var( [, ]? ) ，當變量沒有定義的時候，會使用后面的值。看下面的例子

上面代碼會在 body 的作用域里面查找 --2 變量，沒有的話就會查找全局，都沒有的話就會使用后面的值，所以最后生效的顏色就是blue

可以看到，上面我們的變量名直接使用了數字:joy:，css變量很叼的，不只是數字，漢字都是可以的。

參與計算

此時div里面的文字的大小是多少呢？是瀏覽器默認的大小，為什么不是咱們想象的30px呢，這是因為變量轉換的時候末尾會帶上空格， var(--fong-size)px 會轉換成 30 px

我們可以老老實實聲明變量的時候帶上單位