引人矚目的 CSS 變量（CSS Variable）

時間 2019-11-11

原文原文鏈接

這是一個使人激動的革新。javascript

CSS 變量，顧名思義，也就是由網頁的做者或用戶定義的實體，用來指定文檔中的特定變量。css

更準確的說法，應該稱之爲 CSS 自定義屬性，不過下文爲了好理解都稱之爲 CSS 變量。html

一直以來咱們都知道，CSS 中是沒有變量而言的，要使用 CSS 變量，只能藉助 SASS 或者 LESS 這類預編譯器。java

可是新的草案發布以後，直接在 CSS 中定義和使用變量已經再也不是幻想了，像下面這樣，看個簡單的例子：git

// 聲明一個變量：
:root{
  --bgColor:#000;
}

這裏咱們藉助了上篇文章 結構性僞類 中的 :root{ } 僞類，在全局 :root{ } 僞類中定義了一個 CSS 變量，取名爲 --bgColor 。github

定義完了以後則是使用，假設我要設置一個 div 的背景色爲黑色：瀏覽器

.main{
  background:var(--bgColor);
}

這裏，咱們在須要使用以前定義變量的地方，經過 var(定義的變量名) 來調用。函數

Demo戳我 -- CSS 變量簡單示例。this

CSS 變量的層疊與做用域

CSS 變量是支持繼承的，不過這裏說成級聯或者層疊應該更貼切。spa

在 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。

Demo戳我 -- CSS變量的組合使用

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( )也是一個處於實驗中的功能，使用須要慎重。

Demo戳我 -- CSS 變量與 Calc 函數的組合

CSS 變量的用途

CSS 變量的出現，到底解決了咱們哪些實際生產中的問題？列舉一些：

一、代碼更加符合 DRY（Don‘t repeat yourself）原則。

一個頁面的配色，一般有幾種主要顏色，同一個顏色值在多個地方用到。以前的 LESS、SASS預處理器的變量系統就是完成這個的，如今 CSS 變量也能輕鬆作到。

:root{
  --mainColor:#fc0;
}
// 多個須要使用到的 --mainColor 的地方
.div1{
  color:var(--mainColor);
}
.div2{
  color:var(--mainColor);
}

二、精簡代碼，減小冗餘，響應式媒體查詢的好幫手

通常而言，使用媒體查詢的時候，咱們須要將要響應式改變的屬性所有從新羅列一遍。

.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 變量從代碼量及美觀程度而言都是更好的選擇。

三、方便的從 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');