CSS很美妙，能夠為您的頁面穿上衣裳，各種各樣五彩斑斕的衣裳，但是對於開發者來說，他又不夠靈動，於是乎有了各種各樣的預處理器Sass、LESS、Stylus（筆者建議Sass的SCSS語法），這些預處理器可以很大程度的提高CSS的靈活性，增強CSS的代碼組織與維護。但是畢竟不是親生的，然后負責CSS開發的那些大牛們坐不住了，開始給CSS賦予一些新的特性，本文就來探討下CSS變量的進展與應用。
W3C的關於CSS變量的最新探索體現在CSS Custom Properties for Cascading Variables Module Level 1中，最新更新在2014年5月6日，目前為工作草案，所以本文章只為研究探索只用，所涉知識點存在修改的風險，W3C修改之后本文會同步更新。
所為何來
我們知道，一個網站或應用往往包含大量的CSS，這些CSS里的一些屬性值往往重復使用，比如網站使用的顏色體系，背景色、文字顏色、鏈接顏色等，這些重復使用的屬性值散落在大量的CSS文檔中，如果需要修改其中的一些值，例如改版顏色，那簡直是個噩夢，我們需要每個文件進行查找、替換，眼花繚亂、機械重復的大量操作難免出錯、難免頭大，所以CSS代碼的組織與維護已經成了困擾CSS使用的重要瓶頸。
當然，CSS預處理可以有效的解決這些問題，預處理器的使用已經成了事實上的行業標准，Sass正成為越來越多前端er的選擇。但是，我們需要部署編譯環境、需要讓開發工具支持Sass等，需要一些額外的工作。遇事不免暢想，如果有一天，我們可以像使用普通CSS那些使用預處理器？
於是便有了W3C的CSS Various。
剝繭抽絲
關於變量，不外乎定義和使用，接下來我們分別解析。
定義變量
我們把需要重復使用的值存放到一個自定義的屬性中，這個自定義的屬性用雙虛線開頭標識，如下面代碼所示。
/* 變量定義 */
:root {
--main-color: #06c;
}
/* 變量使用 */
#foo h1 {
color: var(--main-color);
}
變量名
自定義屬性名和變量名遵循CSS標識符的定義規則，可以包含字母數字(a-z,A-Z,0-9)、ISO 10646字符列表的U+00A0及以上字符、下划線(_)、連字符(-)等，不能以數字、連字符+數字、雙連字符開始。
CSS變量語法中，大小寫敏感，可以包含字母、數字、下划線、連字符，且最好不以數字、連字符開頭。
/* 正確的變量名 */
:root{
--link-color: #06c;
--_hover-color: #f6c;
--toolTip_color: #ff0;
--main_background_color: #333;
}
/* 下面兩個變量都有效，表示兩個變量 */
:element{
--link-color:#06c;
--Link-color:#66c;
}
變量值可以接受任何符合語法的值，它的默認值為" "，但是不能為""，否則會報錯。
變量的繼承和覆蓋
變量的聲明和使用遵循CSS的層疊特性，類似於普通編程語言里面的變量作用域。請看下面的代碼。
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
使用變量
我們可以通過var()的方式使用變量，但是不能在屬性名、選擇器中使用變量，只能在屬性值中使用變量，使用變量的語法如下所示。
/*
* var()接受兩個參數，自定義屬性名(變量名)、缺省值
* 第一個參數custom-property-name調用變量
* 第二參數可選，指定自定義變量無效時的缺省值。
*/
var() = var( <custom-property-name> [, <any-value> ]? )
/* for example */
/* In the component’s style: */
.component .header {
color: var(--header-color, blue);
}
.component .text {
color: var(--text-color, black);
}
/* In the larger application’s style: */
.component {
--text-color: #080;
/* header-color isn’t set,
and so remains blue,
the fallback value */
}
我們可以嵌套調用CSS變量。
/*one example */
:root {
--main-color: #c06;
--accent-background: linear-gradient(to top, var(--main-color), white);
}
/*another example */
<one><two><three /></two></one>
one { --foo: 10px; }
two { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }
兼容並包
對於前端開發者來說，兼容並包永遠是一個難以企及的痛，作為一個具有“極客思維”的前端er，我們還是要努力。
首先來看看，CSS變量目前的慘不忍睹的兼容性，如下圖所示，數據來自caniuse。
全線飄紅有木有，只有firefox認識，還怎么玩。
有兄弟說，我就要任性，就要玩怎么辦？老外寫了個補丁(polyfill)，大家不妨一試。
只求甚解
綜上所述，CSS變量處於草案階段，瀏覽器兼容一般，今天寫這篇文章僅為開闊視野，儲備知識之用。商用還請大家使用Sass或LESS等預處理器。
如欲了解更多詳情，使用下面的列表乃求甚解。
致謝
前端開發whqet，關注前端開發，分享相關資源。csdn專家博客，王海慶希望能對您有所幫助。
本文原文鏈接，http://blog.csdn.net/whqet/article/details/43758285
歡迎大家訪問獨立博客http://whqet.github.io