如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

CSS Variable 即CSS變量，聊CSS變量之前，我想先來(lái)說(shuō)說(shuō)Sass和Less,還有Stylus，它們都是目前使用較為普遍的三款CSS預(yù)處理框架，我們?yōu)槭裁匆褂盟鼈兡兀驗(yàn)樗鼈兌伎梢宰屇阍贑SS中方便的使用變量、簡(jiǎn)單的程序邏輯、函數(shù)等在編程時(shí)使用的一些基本技巧，這些框架對(duì)于這種CSS預(yù)處理的技術(shù)已經(jīng)非常成熟，可以讓你的CSS代碼變的更加簡(jiǎn)潔、便于維護(hù)、在編寫(xiě)的時(shí)候也無(wú)需考慮代碼的兼容性。

三大編譯語(yǔ)言的方法

首先他們不約而同的都將自己的名稱(chēng)做為編譯文件的后綴名，分別是：

由于Sass和Less都使用的是標(biāo)準(zhǔn)的CSS語(yǔ)法，和Stylus有所不同，它們分別支持以下幾種語(yǔ)法：

它們的變量使用方法也有不太一樣的地方：

以上三種框架編譯后的寫(xiě)法，都會(huì)得到以下相同的樣式：

其次就是嵌套方式，有時(shí)候我們的類(lèi)名會(huì)引入非常多的父級(jí)元素，這樣冗余的代碼，不僅沒(méi)有提升可讀性，而且增加代碼的體積：

如果使用CSS預(yù)處理，就可以少些重復(fù)的類(lèi)名，代碼結(jié)構(gòu)層次清晰，顯得會(huì)比較優(yōu)雅：

css變量的方法

那么CSS變量這邊的情況又是如何？關(guān)于變量，其實(shí)不外乎定義和使用，我們可以通過(guò)這樣一個(gè)簡(jiǎn)單的例子來(lái)了解，例如：

CSS：

HTML：

這里定義了三個(gè)變量，title、link、text，變量的應(yīng)用范圍是整個(gè)document，實(shí)際效果如下：

當(dāng)然CSS變量也是有應(yīng)用范圍的，這就是說(shuō)，你可以覆蓋它們，因?yàn)樽兞康穆暶骱褪褂米裱薈SS的層疊特性，類(lèi)似于普通編程語(yǔ)言中的變量作用域：

CSS：

這樣定義后，p就變成另外一種顏色（黑色）：

CSS變量還可以賦予任何值，例如，你可以把它們放到calc()計(jì)算表達(dá)式里。這樣可以在不同的情況下對(duì)CSS變量重新賦值，比如，在不同的media query里賦不同的值。下面是一些使用場(chǎng)景的例子：

CSS：

根據(jù)上面的CSS定義，當(dāng)瀏覽器窗口小于等于640px時(shí)，media query就會(huì)發(fā)生作用，里面的CSS變量值發(fā)生變化。

CSS變量的用途

在我們構(gòu)建站點(diǎn)的時(shí)候，通常為了站點(diǎn)的可維護(hù)性，例如使用換膚，或者某一種配色方案，當(dāng)中的文字顏色、字體大小、背景色等等會(huì)在頁(yè)面中多次出現(xiàn)，并被重復(fù)使用，當(dāng)你需要修改的時(shí)候，不論是調(diào)整配色還是文字大小，都可以通過(guò)之前設(shè)置好的CSS變量來(lái)直接修改。

那么為什么我要使用CSS變量呢

相較于傳統(tǒng)的Sass、Less、Stylus等預(yù)處理變量，CSS變量有它的優(yōu)勢(shì)：

1.CSS變量直接修改，立即生效，而傳統(tǒng)與處理器變量編譯后無(wú)法直接更改

2.CSS變量能夠像CSS本身一樣，能夠繼承，能夠組合使用，可以作用需要的地方即作用域

3.配合上JS，可以方便的讀寫(xiě)和控制

4.語(yǔ)法上類(lèi)似CSS和JS，方便快速上手開(kāi)發(fā)，不需要像其它傳統(tǒng)預(yù)處理變量那樣，需要學(xué)習(xí)各種語(yǔ)法，開(kāi)發(fā)和交接成本低

5.CSS變量本身包換了語(yǔ)義的信息，在CSS文件中能夠被識(shí)別和理解。

6.當(dāng)多個(gè)媒介查詢(xún)的時(shí)候，重復(fù)定義的代碼量會(huì)成倍增加。因?yàn)镃SS變量可以傳遞，當(dāng)我們使用響應(yīng)式的時(shí)候，我們只需要修改一個(gè)CSS屬性值即可。下圖中我們只需要修改--columns這一個(gè)變量即可。

css變量支持的情況

下面是目前瀏覽器支持的情況，雖然IE依舊不能夠支持，但是如果是在移動(dòng)端，還是可以來(lái)嘗試一下的，當(dāng)然如果有興趣的可以關(guān)注一下：cssnext，myth這個(gè)兩個(gè)插件，可以讓我們提前使用CSS變量的一些方法：

總結(jié)

總的來(lái)說(shuō)，CSS變量還是能夠針對(duì)性的解決一些項(xiàng)目中的實(shí)際問(wèn)題：

比如一個(gè)站點(diǎn)的配色，如果只是幾個(gè)常用的顏色被應(yīng)用到多個(gè)地方，我們完全可以通過(guò)CSS變量來(lái)輕松修改，并不需要用到Less、Sass、Stylus這樣"復(fù)雜"的編譯系統(tǒng)。

在響應(yīng)式代碼中不需要重復(fù)聲明變量，在Less和Sass中也沒(méi)辦法做到像CSS變量那樣簡(jiǎn)潔優(yōu)雅的代碼。

最后，寫(xiě)這篇文章并不是想說(shuō)CSS變量要取代誰(shuí)和誰(shuí)，而是，我們?cè)陂_(kāi)發(fā)過(guò)程中，應(yīng)該思考自己需要通過(guò)工具解決某個(gè)實(shí)際存存在的問(wèn)題！

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)