了解CSS CSS3原生變數var

在任何語言中，變數的有一點作用都是一樣的，那就是可以降低維護成本，附帶還有更高效能，檔案更高壓縮率的好處。

隨著css預編譯工具sass/less/stylus的關注和逐漸流行，css工作組迅速跟進css變數的規範制定，並且，很多瀏覽器已經跟進，目前，在部分專案中已經可以直接使用了。

chrome/firefox/safari瀏覽器都是綠油油的，相容性大大超出我的預期，於是果斷嘗鮮記錄下語法用法和特性。

css中原生的變數定義語法是：--*，變數使用語法是：var(--*)，其中*表示我們的變數名稱。關於命名這個東西，各種語言都有些顯示，例如css選擇器不能是數字開頭，js中的變數是不能直接數值的，但是，在css變數中，這些限制通通沒有，例如：

:root

body

結果背景色如下：

但是，不能包含$，[，^，(，%等字元，普通字元侷限在只要是「數字[0-9]」「字母[a-za-z]」「下劃線_」和「短橫線-」這些組合，但是可以是中文，日文或者韓文，例如：

body

所以，我們就可以直接使用中文名稱作為變數，即使英語4級沒過的小夥伴也不會有壓力了，我們也不需要隨時掛個翻譯器在身邊了。

無論是變數的定義和使用只能在宣告塊{}裡面，例如，下面這樣是無效的：

--深藍: #369;
body

變數的定義，或者說宣告跟css計數器的宣告類似的，你應該擺脫sass/less等預編譯工具語法先入為主的語法影響，把css的原生變數理解為一種css屬性。

這樣，你就對其權重和變數應用規則要容易理解地多。

例如下面這個例子：

:root

div

#alert

* 我的紫色繼承於根元素

我的綠色來自直接設定

id選擇器權重更高，因此阿拉是紅色！

我也是紅色，佔了繼承的光

上面這個例子我們可以獲得這些資訊：

變數也是跟著css選擇器走的，如果變數所在的選擇器和使用變數的元素沒有交集，是沒有效果的。例如#alert定義的變數，只有id為alert的元素才能享有。如果你想變數全域性使用，則你可以設定在:root選擇器上；

當存在多個同樣名稱的變數時候，變數的覆蓋規則由css選擇器的權重決定的，但並無!important這種用法，因為沒有必要，!important設計初衷是乾掉js的style設定，但對於變數的定義則沒有這樣的需求。

css屬性名可以走變數嗎？

類似下面這樣：

body

答案是「不可以」，要是可以支援的話，那css的壓縮可就要逆天了，估計所有的屬性都會變成1~2個字元。

css變數支援同時多個宣告嗎？

類似下面這樣：

…不好意思，類似不了，語法上就根本不支援。

css變數使用完整語法

css變數使用的完整語法為：var( [, ]? )，用中文表示就是：var( 《自定義屬性名》 [, 《預設值 ]? )，

意思就是，如果我們使用的變數沒有定義（注意，僅限於沒有定義），則使用後面的值作為元素的屬性值。舉個例子：

.box

body

則此時的背景色是#cd0000：

css變數不合法的預設特性

請看下面這個例子：

body

請問，此時的背景色是？

a. transparent    b. 20px     c. #369      d. #cd0000

答案是…………………………a. transparent不知大家答對了沒有！

這是css變數非常有意思的乙個點，對於css變數，只要語法是正確的，就算變數裡面的值是個亂七八糟的東西，也是會作為正常的宣告解析，如果發現變數值是不合法的，例如上面背景色顯然不能是20px，則使用背景色的預設值，也就是預設值代替，於是，上面css等同於：

body

請看下面這個例子：

body

請問，此時的font-size大小是多少？

如果你以為是20px就太天真了，實際上，此處font-size:var(--size)px等同於font-size:20 px，注意，20後面有個空格，所以，這裡的font-size使用的是元素預設的大小。因此，就不要妄圖取消就使用乙個數值來貫穿全場，還是使用穩妥的做法：

body

或者使用css3calc()計算：

body

此時，的font-size大小才是20px，

css變數的相互傳遞特性

就是說，我們在css變數定義的時候可以直接引入其他變數給自己使用，例如：

body

或者更複雜的使用css3calc()計算，例如：

body

對於複雜布局，css變數的這種相互傳遞和直接引用特性可以簡化我們的**和實現成本，尤其和動態布局在一起的時候，無論是css的響應式後者是js驅動的布局變化。

我們來看乙個css變數與響應式布局的例子，您可以狠狠地點選這裡：css變數與響應式布局例項demo

預設進去是4欄，如下圖：

也就是說，當我們響應式變化的時候，改變的css屬性值不是1個，而是3個或者更多，如果我們有3個響應點，是不是就至少需要9個css宣告？但是，由於我們有了css變數，同時，css變數可以傳遞，當我們遭遇響應點的時候，我們只需要改變乙個css屬性值就可以了。

下面就是本demo核心css**（只需要改變--columns這乙個變數即可）：

.box 
@media screen and (max-width: 1200px) 
}@media screen and (max-width: 900px) 
}@media screen and (max-width: 600px) 
}

於是，我們在2欄下的效果就是這樣，字型大小，間距隨著欄目數量的減小也一併減小了，然後每欄之間間距是擴大了。

了解CSS CSS3原生變數var

CSS css3動畫知識

css css3總結（二）屬性

css CSS3中的單位

了解CSS CSS3原生變數var

CSS css3動畫知識

css css3總結（二）屬性

css CSS3中的單位

相關推薦