本文翻譯自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/
轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
Sass和Less這樣的預處理器，讓我們的CSS代碼保持良好的結構和可維護性。像變量、混合(mixins)、循環控制等特性，增強了動態編寫CSS的能力，從而減少重復代碼，也加快了我們開發速度。
近年來，一些動態特性開始作為規范的一部分，出現在CSS語言中。CSS變量(CSS variables)，或者用它的官方稱謂，叫作自定義屬性(custom properties)，已經可用，并且有非常棒的瀏覽器支持，而CSS mixins也正在取得進展。
在本文，你將學會如何使用CSS變量，并把它集成到你的CSS開發流程中，讓你的樣式表更好維護，且減少重復。
讓我們現在就開始吧！
什么是CSS變量？
如果你曾使用過某種編程語言，那么你已經很熟悉變量這個概念了。變量用于存儲和更新你的程序所需要的值，以便使它運行。
例如，考慮下面的JavaScript代碼
let number1 = 2;
let number2 = 3;
let total = number1 number2;
console.log(total); // 5
number1 = 4;
total = number1 number2;
console.log(total); // 7
nubmer1number2totalnumber1number2number1total使用變量的妙處在于，它可以讓你在一個地方存儲值，并且讓你在后面能以各種理由去更新它。在程序中，你不需要為不同的值再添加額外的字符表示：任何值的更新都發生在同一個地方。正如，在你定義的變量上。
CSS在很大程度上是一種聲明式的語言，而缺少動態能力。你也許會認為，讓CSS擁有變量，幾乎讓上面的說法自相矛盾。如果前端開發僅僅是關于文字游戲，那可以這么說。幸運的是，Web的編程語言很像生活中的語言，它們會隨著周圍環境和實踐需要而不斷進化與適應。CSS也同樣如此。
簡單的說，變量已經成為CSS世界中激動人心的事實，并且你即將親自看到，對于這個厲害的新技術，學習和使用起來都非常直觀。
使用CSS變量有什么好處？
使用CSS變量的好處，跟在其他編程語言中使用變量的好處沒什么大的區別。
規范是這樣描述這一點的
使用CSS變量，給看似隨機的值加上富有信息的名字，從而使得大文件更容易閱讀和編輯，更少出錯。因為，你只需要在自定義屬性中改變一次值，所有應用了這個變量的地方都會自動跟著一起改變。W3C 規范
換句話說，通過給變量起一個對你來說在項目中有意義的名字，你能更容易的管理和維護你的代碼。例如，當你為項目中的主色調設置一個變量名
--primary-colorCSS變量和預處理器中的變量有什么不同？
你可能已經在CSS預處理器中嘗試過使用變量而帶來的好處了，比如Sass和Less。
預處理器讓你能設置變量，以及在函數、循環、數學計算等等地方中使用它們。這是否意味著CSS變量已經無關緊要了呢？
那可未必，主要是因為，CSS變量與預處理器中的變量其實是不同的東西。
這些不同基于一個事實：CSS變量是瀏覽器中直接可用的CSS屬性，而預處理中的變量是用于編譯成常規的CSS代碼，瀏覽器其實對它們一無所知。
這意味著，你可以在樣式表中，在內聯樣式中，在SVG的標簽中直接更新CSS變量，甚至可以在運行時用JavaScript直接修改它。而你是無法對預處理器中的變量做上面這些操作的。CSS變量開啟了一個充滿可能性的新世界大門。
不是說你必須要在兩者間做出選擇：沒有什么東西限制你，你可以同時使用CSS變量和預處理變量，并享有它們各自帶來的巨大好處。
CSS變量：語法
雖然本文為了簡潔，我使用了CSS變量(CSS variables)這個稱呼，但官方的規范把它們稱作作為級聯變量的CSS自定義屬性(CSS custom properties for cascading variables)。*CSS自定義屬性(CSS custom property)*的部分看起來像這樣：
--my-cool-background: #73a4f4;
在自定義屬性前添加雙橫線前綴，然后像給普通CSS設值一樣，給自定義屬性設值。在上面的代碼中，我給一個叫做
--my-cool-backgroud而?級聯變量(cascading variable)?的部分，由通過
val()var(--my-cool-background);
自定義屬性作用于CSS選擇器中，
val():root {
--my-cool-background: #73a4f4;
}
/* CSS文件的其他部分 */
#foo {
background-color: var(--my-cool-background);
}
上面的代碼片段把
--my-cool-background:root<html>val()background-color這還沒完。你可以用同樣的淺藍色，給多個HTML標簽的多種可以設置顏色值的地方設值，比如設置它們的
colorborder-colorvar(--my-cool-background)p {
color: var(--my-cool-background);
}
示例1代碼，可點擊查看。
你還可以從通過利用CSS變量獲得另一個CSS變量的值。例如：
--top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));
上面的代碼創建了一個
--my-gradient--top-color--bottom-color示例2代碼。
最后，你可以在CSS變量中加入一個或多個備用值(fallback value/s)，例如：
var(--main-color, #333);
上面的代碼中，
#333CSS變量是區分大小寫的
與普通CSS屬性不同，CSS變量是區分大小寫的。
例如，
var(--foo)var(--FOO)--foo--FOOCSS變量受級聯關系影響
和普通CSS屬性一樣，CSS變量是可繼承的。例如，我們定義了一個屬性，值為
blue:root {
--main-color: blue;
}
當你給任意在
<html>--main-colorblue當你在另一個元素里，為改自定義屬性設置了一個新值時，那么所有該元素的子元素都會繼承那個新值。例如：
:root {
--main-color: blue;
}
.alert {
--main-color: red;
}
p {
color: var(--main-color);
}
<--! HTML -->
<html>
<head>
<!-- head code here -->
</head>
<body>
<div>
<p>blue 的段落</p>
<div class="alert">
<p>red 的段落</p>
</div>
</div>
</body>
</html>
在上面的標簽中，第一個
p--main-color在div標簽中擁有
.alert--main-color示例3代碼
知道目前這些規則差不多夠了。讓我們開始寫代碼吧！
如何在SVG中使用CSS變量
CSS變量和SVG配合得很好。你可以使用CSS變量去修改SVG中的樣式，以及和呈現相關的屬性。
舉個例子，假設你想讓你的SVG圖標能跟隨其所在父容器而擁有不同的顏色。你可以把CSS變量的作用域限定在父容器中，然后給變量設置想要的顏色，那么里面的圖標就會繼承父容器的顏色值。下面是相關代碼：
/* inline SVG symbol for the icon */
<svg>
<symbol id="close-icon" viewbox="0 0 200 200">
<circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" stroke-width="15" />
<text x="100" y="160" fill="var(--icon-color)" text-anchor="middle" style="font-size:250px;">x</text>
</symbol>
</svg>
/* first instance of the icon */
<svg>
<use xlink:href="#close-icon" />
</svg>
上面的代碼使用了
<symbol><use>#close-icon<symbol>注意到SVG symbol中，circle元素里的
strokefill--icon-color:root:root {
--icon-color: black;
}
這是當前圖標看起來的樣子：
這時，如果你把同樣的SVG圖標放在不同的父容器中，并且在父容器上，給你的CSS變量設置各自的局部值，那么你就會得到不同顏色的圖標，并且不用給你的樣式表添加多余的規則。這很酷！
為了展示這一點，我們把同樣的圖標放在一個有
.success<!-- html -->
<div class="success">
<svg>
<use xlink:href="#close-icon" />
</svg>
</div>
現在，讓
--icon-color.successgreen/* css */
.success {
--icon-color: green;
}
這個圖標的顏色就變成了綠色：
來看看一個完整的示例吧:?示例4代碼。
如何在@keyframes
中使用CSS變量
@keyframesCSS變量可以在CSS動畫中使用，即可用于常規HTML元素，也可以用于內聯的SVG。只需要記得，你得知道讓什么元素動，把它視為目標元素，然后創建對該目標元素的選擇器，在選擇器的作用范圍中定義你的CSS變量，然后，使用
val()@keyframes例如，讓SVG中
.bubble<ellipse>.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這里有個完整的例子供你體驗：示例5代碼。
如何通過JavaScript操作CSS變量
另一個超級酷的事情就是，你可以直接通過JavaScript代碼訪問CSS變量。
假設在你的CSS文件中，有一個叫做
--left-pos.sidebar100px.sidebar {
--left-pos: 100px;
}
那么，通過JavaScript獲取
--left-pos// 緩存你即將操縱的元素
const sidebarElement = document.querySelector('.sidebar');
// 緩存sidebarElement的樣式于cssStyles中
const cssStyles = getComputedStyle(sidebarElement);
// 獲取 --left-pos CSS變量的值
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
// 將CSS 變量的值打印到控制臺: 100px
console.log(cssVal);
如果想通過JavaScript設置CSS變量的值，你可以像這樣：
sidebarElement.style.setProperty('--left-pos', '200px');
上面的代碼將sidebar元素中
--left-pos200px請看看CodePen中的如下示例，你可以交互式地點擊側邊欄，修改blend mode屬性和背景色。這些實現只用到了CSS變量和JavaScript。
示例6代碼。
CSS變量的瀏覽器支持
除了IE11（它不支持CSS變量），所有主流瀏覽器都對CSS變量有全面地支持。
對于不支持CSS變量的瀏覽器，一個變通的方案是使用具有虛擬查詢條件(dummy conditional query)的
@supportssection {
color: gray;
}
@supports(--css: variables) {
section {
--my-color: blue;
color: var(--my-color, 'blue');
}
}
考慮到
@supportsval()對于上面的代碼，在Chrome和其他支持CSS變量的瀏覽器中，
<section>
在IE11中，由于它不支持CSS變量，頁面將顯示灰色文本:
可以查看在線的示例7代碼。
此方法的一個缺點是，如果你大量使用CSS變量，而那些不支持CSS變量的瀏覽器在你的項目中有很高的適配優先級，那么相應的代碼會變得很復雜，對于維護來說，甚至是噩夢。
在這種情況下，你可以選擇使用帶有cssnext的PostCSS，它能讓你在CSS代碼中使用最新的特性，并且讓原本不支持這些屬性的瀏覽器，也能運行這些代碼（有點像JavaScript轉換器做的事情）。
備注：這里可下載本文所有示列代碼。
?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=hajkh1j&title=CSS變量（自定義屬性）實踐指南
