這是一個令人激動的革新。 CSS 變數，顧名思義，也就是由網頁的作者或用戶定義的實體，用來指定文檔中的特定變數。 更準確的說法，應該稱之為 CSS 自定義屬性 ，不過下文為了好理解都稱之為 CSS 變數。 一直以來我們都知道，CSS 中是沒有變數而言的，要使用 CSS 變數，只能藉助 SASS 或者 ...
這是一個令人激動的革新。
CSS 變數，顧名思義，也就是由網頁的作者或用戶定義的實體，用來指定文檔中的特定變數。
更準確的說法，應該稱之為 CSS 自定義屬性 ，不過下文為了好理解都稱之為 CSS 變數。
一直以來我們都知道，CSS 中是沒有變數而言的，要使用 CSS 變數，只能藉助 SASS 或者 LESS 這類預編譯器。
但是新的草案發佈之後，直接在 CSS 中定義和使用變數已經不再是幻想了，像下麵這樣，看個簡單的例子：
// 聲明一個變數：
:root{
--bgColor:#000;
}
這裡我們藉助了上篇文章
結構性偽類中的:root{ }偽類，在全局:root{ }偽類中定義了一個 CSS 變數，取名為--bgColor。
定義完了之後則是使用，假設我要設置一個 div 的背景色為黑色：
.main{
background:var(--bgColor);
}
這裡，我們在需要使用之前定義變數的地方，通過 var(定義的變數名) 來調用。
CSS 變數的層疊與作用域
CSS 變數是支持繼承的，不過這裡說成級聯或者層疊應該更貼切。
在 CSS 中，一個元素的實際屬性是由其自身屬性以及其祖先元素的屬性層疊得到的，CSS 變數也支持層疊的特性，當一個屬性沒有在當前元素定義，則會轉而使用其祖先元素的屬性。在當前元素定義的屬性，將會覆蓋祖先元素的同名屬性。
其實也就是作用域，通俗一點就是局部變數會在作用範圍內覆蓋全局變數。
:root{
--mainColor:red;
}
div{
--mainColor:blue;
color:var(--mainColor);
}
上面示例中最終生效的變數是 --mainColor:blue。
另外值得註意的是 CSS 變數並不支持 !important 聲明。
CSS 變數的組合
CSS 變數也可以進行組合使用。看看下麵的例子：
<div></div>
CSS 如下：
:root{
--word:"this";
--word-second:"is";
--word-third:"CSS Variable";
}
div::before{
content:var(--word)' 'var(--word-second)' 'var(--word-third);
}
上面 div 的內容將會顯示為this is CSS Variable。
CSS 變數與計算屬性 calc( )
更有趣的是，CSS 變數可以結合 CSS3 新增的函數 calc( ) 一起使用，考慮下麵這個例子：
<div> CSS Varialbe </div>
CSS 如下：
:root{
--margin: 10px;
}
div{
text-indent: calc(var(--margin)*10)
}
上面的例子，CSS 變數配合 calc 函數，得到的最終結果是 text-indent:100px 。
calc( )也是一個處於實驗中的功能，使用需要慎重。
CSS 變數的用途
CSS 變數的出現，到底解決了我們哪些實際生產中的問題？列舉一些：
1、代碼更加符合 DRY（Don‘t repeat yourself）原則。
一個頁面的配色，通常有幾種主要顏色，同一個顏色值在多個地方用到。之前的 LESS、SASS預處理器的變數系統就是完成這個的，現在 CSS 變數也能輕鬆做到。
:root{
--mainColor:#fc0;
}
// 多個需要使用到的 --mainColor 的地方
.div1{
color:var(--mainColor);
}
.div2{
color:var(--mainColor);
}
2、精簡代碼，減少冗餘，響應式媒體查詢的好幫手
一般而言，使用媒體查詢的時候，我們需要將要響應式改變的屬性全部重新羅列一遍。
.main {
width: 1000px;
margin-left: 100px;
}
@media screen and (min-width:1480px) {
.main {
width: 800px;
margin-left: 50px;
}
}
即便是 LESS 和 SASS 也無法做到更加簡便，不過 CSS 變數的出現讓媒體查詢更加的簡單：
:root {
--mainWidth:1000px;
--leftMargin:100px;
}
.main {
width: var(--mainWidth);
margin-left: var(--leftMargin);
}
@media screen and (min-width:1480px) {
:root {
--mainWidth:800px;
--leftMargin:50px;
}
}
看上好像是代碼多了，多了一層定義的環節，只是我這裡示例的 CSS 改變的樣式屬性較少，當媒體查詢的數量達到一定程度，使用 CSS 變數從代碼量及美觀程度而言都是更好的選擇。
3、方便的從 JS 中讀/寫，統一修改
CSS 變數也是可以和 JS 互相交互。
:root{
--testMargin:75px;
}
// 讀取
var root = getComputedStyle(document.documentElement);
var cssVariable = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable); // '75px'
// 寫入
document.documentElement.style.setProperty('--testMargin', '100px');
與傳統 LESS 、SASS 等預處理器變數比較
相較於傳統的 LESS 、SASS 等預處理器變數，CSS 變數的優點在於:
-
CSS 變數的動態性，能在頁面運行時更改，而傳統預處理器變數編譯後無法更改
-
CSS 變數能夠繼承，能夠組合使用，具有作用域
-
配合 Javascript 使用，可以方便的從 JS 中讀/寫
Can I Use？
當然，上述示例正常顯示的前提是你使用的瀏覽器已經支持了 CSS 變數：
當你看到這篇文章的時候，可能已經有了改觀，可以戳進去看看 CANIUSE 。
參考文獻：
Why I'm Excited About Native CSS Variables
本文收錄在我的 CSS系列文章 ，感興趣的可以戳進去看看。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
