背景
複雜的網站都會有大量的CSS代碼，通常也會有許多重複的值。
舉個例子，同樣一個顏色值可能在成千上百個地方被使用到，如果這個值發生了變化，需要全局搜索並且一個一個替換，效率不高且容易出錯。
自定義屬性在某個地方存儲一個值，然後在其他許多地方引用它。另一個好處是語義化的標識。比如，--main-text-color 會比 #00ff00 更易理解，尤其是這個顏色值在其他上下文中也被使用到。
概念
自定義屬性（有時候也被稱作CSS變量或者級聯變量）是由CSS作者定義的，它包含的值可以在整個文檔中重複使用。
由自定義屬性標記設定值（比如： --main-color: black;），由 var() 函數來獲取值（比如： color: **var(--main-color)**;）。
優勢
在構建大型站點時，作者通常會面對可維護性的挑戰。在這些網頁中，所使用的CSS 的數量是非常龐大的，並且在許多場合大量的信息會重複使用。
例如，在網頁中維護一個配色方案，意味着一些顏色在 CSS 文件中多次出現，並被重複使用。當你修改配色方案時，不論是調整某個顏色或完全修改整個配色，都會成爲一個複雜的問題，不容出錯，而單純查找替換是遠遠不夠的。
如果使用了CSS 框架，這種情況會變得尤其糟糕，此時如果要修改顏色，則需要對框架本身進行修改。
在這些場合使用 LESS 或 Sass 類似的預處理器是非常有幫助的，但是這種通過添加額外步驟的方式，可能會增加系統的複雜性。
CSS變量爲我們帶來一些預處理器的便利，並且不需要額外的編譯。
這些變量的第二個優勢就是名稱本身就包含了語義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#00ff00更容易理解，特別是同樣的顏色出現在不同的文件中的時候。
用法
下面是 CSS 變量的使用方法和步驟。
CSS 中聲明變量
我們都知道，在 JS 中要使用一個變量前，必須聲明這個表變量。在 CSS 中也是一樣的道理。
聲明一個自定義屬性，屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的CSS值。和其他屬性一樣，自定義屬性也是寫在規則集之內的，如下：
body {
--bg-color: #7F583F;
--color: #F7EFD2;
}
上面代碼中，body選擇器裏面聲明瞭兩個變量：--bg-color和--color。
它們與color、font-size等正式屬性沒有什麼不同，只是沒有默認含義。所以 CSS 變量（CSS variable）又叫做**"CSS 自定義屬性"**（CSS custom properties）。
規則集所指定的選擇器定義了自定義屬性的可見作用域。通常的最佳實踐是定義在根僞類 :root下，這樣就可以在HTML文檔的任何地方訪問到它了：
:root {
--main-bg-color: #eee;
}
自定義屬性名是大小寫敏感的，
--my-color和--My-color會被認爲是兩個不同的自定義屬性。
CSS 中使用變量
通過var()函數來讀取變量。語法如下:
var(custom-property-name, value)
-
name (必需) 變量名（以兩條破折號開頭）。
-
value (可選) 表示變量的默認值。如果該變量不存在，就會使用這個默認值。
變量名稱必須以兩個破折號（--）開頭，且區分大小寫！
使用方法：
element {
background-color: var(--main-bg-color);
}
變量也可以使用在變量聲明中：
:root {
--primary-color: #eee;
--primary-bg-color: var(--main-bg-color);
}
變量值只能用作屬性值，不能用作屬性名。
JS 操作 CSS 變量
在 JS 代碼中，我們可能需要讀取 CSS 變量的值，其方法如下：
const root = document.querySelector(":root");
// 設置 CSS 變量
root.style.setProperty("--main-bg-color", "red");
// 讀取 CSS 變量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 刪除 CSS 變量
root.style.removeProperty("--main-bg-color");
總結
以上就是關於 CSS 變量的一些基本概念及使用方法，更多詳情待後續！
靈活使用 CSS 變量，不僅可以提高生產力，也能夠提高代碼的可閱讀性和維護性。
~
~
~ 本文完
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公衆號是『編程三昧』，歡迎關注，希望大家多多指教！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！