摘要：預(yù)處理器可以讓你設(shè)置變量，并且在函數(shù)循環(huán)和數(shù)學(xué)操作等中使用。不同之處在于變量是運(yùn)行在瀏覽器中的動(dòng)態(tài)屬性，而預(yù)處理器變量會(huì)被編譯成普通的代碼。變量提供了更多可能性但這并不是說(shuō)你需要在二者之間選擇其一你可以同時(shí)使用變量和預(yù)處理器變量的強(qiáng)大功能。

CSS預(yù)處理器，如Sass和Less，使得CSS代碼易于組織和維護(hù)。通過(guò)提供變量、混合、循環(huán)等特性，使得CSS具有動(dòng)態(tài)編寫的能力，從而減少重復(fù)性工作，提高開(kāi)發(fā)速度。

最近，CSS開(kāi)始添加一些動(dòng)態(tài)特性。CSS變量（自定義屬性）已經(jīng)加入規(guī)范，并且獲得了大多數(shù)瀏覽器的支持。但是CSS混合特性還在進(jìn)行中。

在這篇文章中，我們將會(huì)向你展示怎么把CSS變量應(yīng)用到開(kāi)發(fā)中，從而使得樣式表更加可維護(hù)和DRY (Don’t Repeat Yourself)。

讓我們現(xiàn)在開(kāi)始！

如果你使用過(guò)任何編程語(yǔ)言，你肯定熟悉變量這個(gè)概念。變量讓你存儲(chǔ)和更新程序運(yùn)行需要的值。

例如，考慮下面的JavaScript片段：

let number1 = 2;
let number2 = 3;
let total = number1 + number2; 
console.log(total); // 5
number1 = 4;
total = number1 + number2;
console.log(total); // 7

number1和number2是兩個(gè)變量，分別存儲(chǔ)數(shù)字2和3。

total也是一個(gè)變量，存儲(chǔ)number1和number2變量的和，在這個(gè)例子中是5。你可以動(dòng)態(tài)更新這些變量的值，并且在程序的任何地方使用更新后的值。在上面的代碼片段中，我把number1的值更新為4，當(dāng)我使用相同的變量再次執(zhí)行加法操作時(shí)，存儲(chǔ)在total中的值就變成7，而不是5了。

變量的好處在于你可以把值存儲(chǔ)在一個(gè)地方，然后在你需要的地方修改它。這樣你就不用在程序的不同地方為不同的值添加不同的變量：所有變量更新使用同一個(gè)存儲(chǔ)地址，比如你的變量。

CSS主要是一門聲明式語(yǔ)言，缺乏動(dòng)態(tài)性。你可能會(huì)說(shuō)給CSS添加變量會(huì)與CSS本身相矛盾。如果前端開(kāi)發(fā)僅僅關(guān)注語(yǔ)義，那么給CSS添加變量確實(shí)會(huì)與CSS本身矛盾。幸運(yùn)的是，網(wǎng)絡(luò)語(yǔ)言更像動(dòng)態(tài)語(yǔ)言，它會(huì)隨著周圍環(huán)境和開(kāi)發(fā)者的需求不斷變化。CSS也不例外。

總而言之，變量已經(jīng)成為CSS中令人激動(dòng)的實(shí)現(xiàn)，你很快也會(huì)發(fā)現(xiàn)，學(xué)習(xí)和使用它非常直觀。

在CSS中使用變量的好處和在編程語(yǔ)言中沒(méi)有特別大的不同。

下面是規(guī)范對(duì)上述問(wèn)題的回答：

[使用CSS變量]使大文件更易于閱讀，因?yàn)榭雌饋?lái)很隨意的值有了一個(gè)提示信息的名字，并且編輯這些文件更加簡(jiǎn)單，更不易于出錯(cuò)。因?yàn)槟阒恍枰谧远x屬性處修改一次，然后這個(gè)修改就會(huì)自動(dòng)應(yīng)用到使用該變量的任何地方。
W3C規(guī)范.
換句話說(shuō)：

通過(guò)與項(xiàng)目相關(guān)的方式命名變量，管理和維護(hù)代碼會(huì)變得更加容易。例如，如果項(xiàng)目的主色調(diào)保存在--primary-color中，修改項(xiàng)目的主色調(diào)就會(huì)變得很容易，僅僅改變?cè)撟兞康闹稻涂梢裕挥萌バ薷谋椴荚诖a各處、不同CSS屬性中的顏色值。

在給網(wǎng)站添加樣式時(shí)，你可能已經(jīng)通過(guò)預(yù)處理器，如Sass和Less，體驗(yàn)過(guò)變量的靈活性帶來(lái)的好處。

預(yù)處理器可以讓你設(shè)置變量，并且在函數(shù)、循環(huán)和數(shù)學(xué)操作等中使用。這是不是意味著CSS變量就沒(méi)有什么用處了？

不完全是，主要是因?yàn)镃SS變量和預(yù)處理器變量并不一樣。

不同之處在于CSS變量是運(yùn)行在瀏覽器中的動(dòng)態(tài)CSS屬性，而預(yù)處理器變量會(huì)被編譯成普通的CSS代碼。因此，瀏覽器并不知道預(yù)處理器變量的存在。

這就意味著你可以更改樣式表、行內(nèi)樣式屬性和SVG展示型屬性中的CSS變量，或者使用JavaScript操作它們。這是預(yù)處理器變量做不到的。CSS變量提供了更多可能性！

但這并不是說(shuō)你需要在二者之間選擇其一：你可以同時(shí)使用CSS變量和預(yù)處理器變量的強(qiáng)大功能。

為了簡(jiǎn)單起見(jiàn)，在這篇文章中我使用了CSS變量這個(gè)術(shù)語(yǔ)，但是官方文檔給出的是級(jí)聯(lián)變量的CSS自定義屬性。CSS自定義屬性形式如下：

`--my-cool-background: #73a4f4;`

在自定義屬性前面添加兩個(gè)短橫線，然后像普通的CSS屬性一樣給它賦值。在上面的代碼片段中，給--my-cool-background自定義屬性賦了一個(gè)顏色值。

級(jí)聯(lián)變量部分包括使用var()函數(shù)應(yīng)用自定義屬性，形式如下：

`var(--my-cool-background)`

自定義屬性的使用范圍是CSS選擇器的內(nèi)部，var()像一個(gè)真正的CSS屬性值被使用。

:root {
  --my-cool-background: #73a4f4;
}
/* CSS文件的其他部分 */
#foo {
  background-color: var(--my-cool-background);
}

上面的代碼片段把--my-cool-background自定義屬性定義在:root偽元素內(nèi)，這使得自定義屬性的值全局可用（:root匹配元素內(nèi)的任何元素）。然后使用var()函數(shù)把值應(yīng)用到ID是foo的容器的background-color屬性上，然后這個(gè)容器就會(huì)得到一個(gè)淡藍(lán)色背景。

除此之外，還可以把淡藍(lán)色應(yīng)用到多個(gè)HTML元素的其他顏色屬性上，如color，border-color等。你需要做得僅僅是通過(guò)var(--my-cool-background)獲取自定義屬性的值，然后應(yīng)用到相應(yīng)的屬性上。當(dāng)然，你需要好好考慮CSS變量的命名規(guī)范，使你的變量名能更好地反映變量的內(nèi)容。

p {
  color: var(--my-cool-background);
}

查看CodePen上SitePoint(@SitePoint)的CSS變量運(yùn)行實(shí)例。

你也可以在CSS變量中使用另一個(gè)CSS變量，舉例如下：

--top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));

上面的代碼片段創(chuàng)建了--my-gradient變量，它的值是使用--top-color和--bottom-color變量創(chuàng)建的一個(gè)漸變。現(xiàn)在，你可以在任何地方通過(guò)僅僅改變變量的值來(lái)修改漸變，而不必到處在樣式表中創(chuàng)建漸變實(shí)例。

下面是一個(gè)在線CodePen演示。

查看CodePen上SitePoint(@SitePoint)的在CSS變量中使用另一個(gè)CSS變量。

最后，在使用CSS變量的時(shí)候，還可以添加一個(gè)或多個(gè)后備值，舉例如下：

`var(--main-color, #333);`

在上面的代碼片段中，#333是一個(gè)后備值。如果沒(méi)有提供后備值，當(dāng)自定義屬性無(wú)效或者沒(méi)有賦值的時(shí)候，會(huì)使用繼承值。

和一般的CSS屬性不一樣，CSS變量是大小寫敏感的。

例如，var(--foo)和var(--Foo)使用的是兩個(gè)不同的自定義屬性，分別是--foo和--Foo。

類似一般的CSS屬性，CSS變量也會(huì)繼承。例如，我們定義一個(gè)值是blue的自定義屬性：

:root {
  --main-color: blue;
}

根元素內(nèi)的所有元素如果應(yīng)用--main-color就會(huì)繼承值blue。

如果你在另一個(gè)元素里面給自定義屬性賦了一個(gè)不同的值，這個(gè)元素的所有子元素就會(huì)繼承這個(gè)新值，舉例如下：

:root {
  --main-color: blue;
}

.alert {
  --main-color: red;
}

p {
  color: var(--main-color);
}

<--! HTML -->

  
    
  
  
    

      
blue paragraph.
      

        
red paragraph.
      
    
  

上面的標(biāo)記語(yǔ)言中的第一個(gè)段落會(huì)繼承全局--main-color的值，所以字體顏色是藍(lán)色。

具有.alert類的div元素內(nèi)部的段落元素的字體顏色是紅色的，因?yàn)樗^承了局部范圍內(nèi)的--main-color變量，這個(gè)變量的值是red。

查看CodePen上SitePoint(@SitePoint)的CSS變量繼承的簡(jiǎn)單例子。

現(xiàn)在了解了規(guī)則，讓我們開(kāi)始實(shí)踐吧！

CSS變量和SVG可以很好的一起工作！你可以使用CSS變量來(lái)修改內(nèi)聯(lián)SVG中的樣式和展示型屬性。

比如，你想通過(guò)SVG圖標(biāo)元素的父元素來(lái)給它一個(gè)不同的顏色。你可以在父元素內(nèi)設(shè)置一個(gè)局部的CSS變量，然后把它賦值成你想要的顏色，然后，父元素內(nèi)的圖標(biāo)就能從父元素繼承到合適的顏色。

下面是相關(guān)代碼：

/* 圖標(biāo)的內(nèi)聯(lián)SVG symbol */


/* 圖標(biāo)的第一個(gè)實(shí)例  */

上面的標(biāo)記語(yǔ)言使用了標(biāo)簽，使用它可以創(chuàng)建不可見(jiàn)的SVG圖形。然后使用標(biāo)簽實(shí)例化了一個(gè)上述圖形的可見(jiàn)版本。使用這種方式通過(guò)簡(jiǎn)單地引用元素的ID(#close-icon)就能創(chuàng)建大量的圖標(biāo)，然后再根據(jù)你的喜好對(duì)圖標(biāo)進(jìn)行自定義。這比重復(fù)的寫同一段代碼要簡(jiǎn)便的多。如果你想復(fù)習(xí)這個(gè)技術(shù)，Massimo Cassandro在他的創(chuàng)造你自己的SVG圖標(biāo)中提供了一個(gè)快速教程。

注意SVG中的圓形元素的stroke屬性值和文本元素的fill屬性值：它們都使用了一個(gè)CSS變量，--icon-color，這個(gè)變量定義在CSS文檔的:root選擇器上，如下所示：

:root {
  --icon-color: black;
}

圖標(biāo)現(xiàn)在的樣子如下：

如果你現(xiàn)在把SVG圖標(biāo)放到不同的容器中，然后在每個(gè)父元素的選擇器中給這個(gè)變量賦不同的顏色值，你就能在不添加任何樣式規(guī)則的情況下創(chuàng)建不同顏色的圖標(biāo)。真酷！

舉個(gè)例子，把上面圖標(biāo)的一個(gè)實(shí)例放在一個(gè)有類.success的div中。

HTML：

現(xiàn)在，在.success選擇器內(nèi)給--icon-color變量賦值green，然后看下效果。

CSS：

.success {
  --icon-color: green;
}

現(xiàn)在，圖標(biāo)的顏色變成了綠色：

查看下面完整的演示示例：

查看CodePen上SitePoint(@SitePoint)的SVG圖標(biāo)和CSS變量的基本使用。

CSS變量可以和CSS動(dòng)畫一起使用，不論是在一般的HTML元素還是內(nèi)聯(lián)SVG元素上。只需要記住在想添加動(dòng)畫的元素的選擇器上定義自定義屬性，然后使用var()函數(shù)在@keyframes中引用。

比如，給SVG的一個(gè)有類.bubble的元素添加動(dòng)畫，CSS代碼如下：

.bubble {
  --direction-y: 30px;
  --transparency: 0;
  animation: bubbling 3s forwards infinite;
}

@keyframes bubbling {
  0% {
    transform: translatey(var(--direction-y));
    opacity: var(--transparency);
  }
  40% {
    opacity: calc(var(--transparency) + 0.2);
  }
  70% {
    opacity: calc(var(--transparency) + 0.1);
  }
  100% {
    opacity: var(--transparency);
  }
}

你可能已經(jīng)注意到我們可以使用CSS的calc()通過(guò)var()函數(shù)對(duì)變量進(jìn)行計(jì)算，這使代碼更加靈活。

這個(gè)例子中使用CSS變量的靈活之處是通過(guò)簡(jiǎn)單的改變相應(yīng)選擇器內(nèi)部的變量值，就可以改變動(dòng)畫效果，而不必查找@keyframes指令中的每個(gè)屬性。

下面是完整的CodePen演示：

查看CodePen上SitePoint(@SitePoint)的使用CSS變量和SVG的簡(jiǎn)單動(dòng)畫。

一件更酷的事情是你可以直接通過(guò)JavaScript代碼訪問(wèn)CSS變量。

假設(shè)有一個(gè)叫--left-pos的CSS變量，它的值的100px，定義在CSS文檔的.sidebar類中：

.sidebar {
  --left-pos: 100px;
}

使用類似下面的JavaScript代碼獲取--left-pos的值：

// 獲取你想添加動(dòng)畫的元素
const sidebarElement = document.querySelector(".sidebar");

// 把側(cè)邊欄元素的樣式存儲(chǔ)在cssStyles變量中
const cssStyles = getComputedStyle(sidebarElement);

// 獲取CSS變量--left-pos的值
const cssVal = String(cssStyles.getPropertyValue("--left-pos")).trim(); 

// 在控制臺(tái)打印CSS變量的值
// 控制臺(tái)會(huì)輸出變量的值為100px
console.log(cssVal);

使用類似下面的JavaScript代碼給CSS變量賦值：

`sidebarElement.style.setProperty("--left-pos", "200px");`

上面的代碼片段把側(cè)邊欄元素的--left-pos變量設(shè)置成200px。

相對(duì)于改變大量的類或者重寫全部的CSS規(guī)則，使用CSS變量給網(wǎng)站添加交互更直接，也更易于維護(hù)。

查看下面的CodePen演示，你可以通過(guò)側(cè)邊欄來(lái)改變混合模式屬性和背景顏色，而這僅僅需要CSS變量和JavaScript:

查看CodePen上SitePoint(@SitePoint)的混合模式，CSS變量和JavaScript。

除了IE11（不支持）和Microsoft Edge（buggy支持），在本文編寫的時(shí)候，所有主流瀏覽器都完全支持CSS變量。

適配有問(wèn)題的瀏覽器的方式之一是使用@supports進(jìn)行條件查詢：

section {
  color: gray;
}

@supports(--css: variables) {
  section {
    --my-color: blue;
    color: var(--my-color, "blue");
  }
}

因?yàn)镮E/Edge支持@supports，所以上面的代碼會(huì)生效。如果在var()函數(shù)中添加一個(gè)后備值，你的代碼將會(huì)更加健壯，在支持的更加不好的瀏覽器中也能優(yōu)雅降級(jí)。

所以，在Chrome和其他支持CSS變量的瀏覽器中，