摘要：預處理器可以讓你設置變量，并且在函數循環和數學操作等中使用。不同之處在于變量是運行在瀏覽器中的動態屬性，而預處理器變量會被編譯成普通的代碼。變量提供了更多可能性但這并不是說你需要在二者之間選擇其一你可以同時使用變量和預處理器變量的強大功能。

CSS預處理器，如Sass和Less，使得CSS代碼易于組織和維護。通過提供變量、混合、循環等特性，使得CSS具有動態編寫的能力，從而減少重復性工作，提高開發速度。

最近，CSS開始添加一些動態特性。CSS變量（自定義屬性）已經加入規范，并且獲得了大多數瀏覽器的支持。但是CSS混合特性還在進行中。

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

讓我們現在開始！

如果你使用過任何編程語言，你肯定熟悉變量這個概念。變量讓你存儲和更新程序運行需要的值。

例如，考慮下面的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是兩個變量，分別存儲數字2和3。

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

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

CSS主要是一門聲明式語言，缺乏動態性。你可能會說給CSS添加變量會與CSS本身相矛盾。如果前端開發僅僅關注語義，那么給CSS添加變量確實會與CSS本身矛盾。幸運的是，網絡語言更像動態語言，它會隨著周圍環境和開發者的需求不斷變化。CSS也不例外。

總而言之，變量已經成為CSS中令人激動的實現，你很快也會發現，學習和使用它非常直觀。

在CSS中使用變量的好處和在編程語言中沒有特別大的不同。

下面是規范對上述問題的回答：

[使用CSS變量]使大文件更易于閱讀，因為看起來很隨意的值有了一個提示信息的名字，并且編輯這些文件更加簡單，更不易于出錯。因為你只需要在自定義屬性處修改一次，然后這個修改就會自動應用到使用該變量的任何地方。
W3C規范.
換句話說：

通過與項目相關的方式命名變量，管理和維護代碼會變得更加容易。例如，如果項目的主色調保存在--primary-color中，修改項目的主色調就會變得很容易，僅僅改變該變量的值就可以，而不用去修改遍布在代碼各處、不同CSS屬性中的顏色值。

在給網站添加樣式時，你可能已經通過預處理器，如Sass和Less，體驗過變量的靈活性帶來的好處。

預處理器可以讓你設置變量，并且在函數、循環和數學操作等中使用。這是不是意味著CSS變量就沒有什么用處了？

不完全是，主要是因為CSS變量和預處理器變量并不一樣。

不同之處在于CSS變量是運行在瀏覽器中的動態CSS屬性，而預處理器變量會被編譯成普通的CSS代碼。因此，瀏覽器并不知道預處理器變量的存在。

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

但這并不是說你需要在二者之間選擇其一：你可以同時使用CSS變量和預處理器變量的強大功能。

為了簡單起見，在這篇文章中我使用了CSS變量這個術語，但是官方文檔給出的是級聯變量的CSS自定義屬性。CSS自定義屬性形式如下：

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

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

級聯變量部分包括使用var()函數應用自定義屬性，形式如下：

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

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

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

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

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

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

查看CodePen上SitePoint(@SitePoint)的CSS變量運行實例。

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

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

上面的代碼片段創建了--my-gradient變量，它的值是使用--top-color和--bottom-color變量創建的一個漸變。現在，你可以在任何地方通過僅僅改變變量的值來修改漸變，而不必到處在樣式表中創建漸變實例。

下面是一個在線CodePen演示。

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

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

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

在上面的代碼片段中，#333是一個后備值。如果沒有提供后備值，當自定義屬性無效或者沒有賦值的時候，會使用繼承值。

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

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

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

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

根元素內的所有元素如果應用--main-color就會繼承值blue。

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

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

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

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

<--! HTML -->

  
    
  
  
    

      
blue paragraph.
      

        
red paragraph.
      
    
  

上面的標記語言中的第一個段落會繼承全局--main-color的值，所以字體顏色是藍色。

具有.alert類的div元素內部的段落元素的字體顏色是紅色的，因為它繼承了局部范圍內的--main-color變量，這個變量的值是red。

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

現在了解了規則，讓我們開始實踐吧！

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

比如，你想通過SVG圖標元素的父元素來給它一個不同的顏色。你可以在父元素內設置一個局部的CSS變量，然后把它賦值成你想要的顏色，然后，父元素內的圖標就能從父元素繼承到合適的顏色。

下面是相關代碼：

/* 圖標的內聯SVG symbol */


/* 圖標的第一個實例  */

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

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

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

圖標現在的樣子如下：

如果你現在把SVG圖標放到不同的容器中，然后在每個父元素的選擇器中給這個變量賦不同的顏色值，你就能在不添加任何樣式規則的情況下創建不同顏色的圖標。真酷！

舉個例子，把上面圖標的一個實例放在一個有類.success的div中。

HTML：

現在，在.success選擇器內給--icon-color變量賦值green，然后看下效果。

CSS：

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

現在，圖標的顏色變成了綠色：

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

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

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

比如，給SVG的一個有類.bubble的元素添加動畫，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);
  }
}

你可能已經注意到我們可以使用CSS的calc()通過var()函數對變量進行計算，這使代碼更加靈活。

這個例子中使用CSS變量的靈活之處是通過簡單的改變相應選擇器內部的變量值，就可以改變動畫效果，而不必查找@keyframes指令中的每個屬性。

下面是完整的CodePen演示：

查看CodePen上SitePoint(@SitePoint)的使用CSS變量和SVG的簡單動畫。

一件更酷的事情是你可以直接通過JavaScript代碼訪問CSS變量。

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

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

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

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

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

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

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

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

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

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

相對于改變大量的類或者重寫全部的CSS規則，使用CSS變量給網站添加交互更直接，也更易于維護。

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

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

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

適配有問題的瀏覽器的方式之一是使用@supports進行條件查詢：

section {
  color: gray;
}

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

因為IE/Edge支持@supports，所以上面的代碼會生效。如果在var()函數中添加一個后備值，你的代碼將會更加健壯，在支持的更加不好的瀏覽器中也能優雅降級。

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