摘要：變量的函數引用的自定義屬性被稱為變量。為此，可讀性和可維護性是自定義屬性最大的優勢。自定義屬性作用域在中，變量有作用域一說。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。

??CSS語言是一種聲明式語言，不像其他語言有變量、條件和邏輯等特性，因為這個原因，社區中有了各種CSS處理器語言，比如Sass、LESS和Stylus等。這些處理器語言引入了一些類似其他程序語言的特性，比如變量、運算符和邏輯運算等。
??雖然CSS處理器給編寫和維護CSS帶來了一些便利，但是需要額外的編譯，所以社區開始將CSS處理器中的變量引入到原生CSS中，最后形成了今天的CSS自定義屬性。

??由CSS作者（CSSer）自己定義的屬性，統稱為自定義屬性。它允許作者自由的選擇名稱，自由的為名稱屬性分配任意值。這些屬性能夠提供給var()函數使用，被var()函數引用的自定義屬性又常被稱為變量。
??這樣一來，CSSer聲明的這些自由屬性就有了兩個名稱：自定義屬性 和 變量：
??自定義屬性：使用兩個連詞線 -- 聲明的特殊格式作為名稱，該名稱被稱為自定義屬性，同時可以給自定義屬性賦予任何值。比如 --color: #fff 。
??變量：CSS的 var() 函數引用的自定義屬性被稱為變量。var() 會返回自定義屬性所對應的值，同時可以被運用于相應的CSS屬性。對應的即是CSS規則中的屬性值。
??用一張圖來描述他們之間的關系：

??當我們的項目中有很多CSS文件時，無形中增加了維護成本。即便使用了CSS框架，雖然這些框架都有可能引入了Sass這樣的CSS處理器幫助我們減少了出錯的機會，提高了可維護性的能力，但這種通過添加額外步驟的方式（需要做編譯處理），可能會增加系統的復雜性。
??CSS自定義屬性的出現，為我們帶來了一些CSS處理器的便利，并且不需要額外的編譯。在CSS中使用CSS自定義屬性的好處和在編寫語言中使用變量的好處沒有特別的不同之處。W3C規范上有過這樣的一段描述：
??使用CSS自定義屬性使得大文件更易于閱讀，因為看起來很隨意的值有了一個提示信息的名字，并且編輯這些文件更加簡單，更不易于出錯。因為你只需要在自定義屬性處修改一次，這個修改就會應用到使用該自定義屬性的任何地方。
??另外，CSS自定義屬性除了提供了更靈活的設置、引用和修改的便利性之外，還具有較強的語義化（比如primary這樣的名稱總是要比red這樣的名稱來得有意義）。這些語義化信息讓你的CSS文件變得易讀和理解。
??為此，可讀性和可維護性是CSS自定義屬性最大的優勢。并且，它讓我們可以在CSS中使用原生的變量，而不再需要借助于類似Sass這樣的CSS處理器。

??CSS的自定義屬性是CSS的一個重要的新功能，到目前為止所有的現代瀏覽器中都對CSS自定義屬性做了良好的支持，這將使得原生 CSS 從此變得更加強大。

??CSS自定義屬性和常規CSS屬性的用法是一樣的。把它們當作動態屬性會比變量更好。這意味著它們只能在聲明塊中使用。也就是說，自定義屬性和選擇器是強綁定的。可以是任何有效的選擇器。
??如果已聲明的CSS自定義屬性未被任何屬性調用的話，將不會產生任何的效果。只會是一段字符串停留在你的樣式文件中。
??聲明自定義屬性的時候，自定義屬性名前面要加兩根連詞線（--）。

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

??CSS自定義屬性的命名規則比較松散，可以是任何有效的字符，比如中文、大寫字母、駝峰命名、中距線、emoji和HTML實體等等：

自定義屬性名大小寫敏感，--color 和 --COLOR 是兩個不同的自定義屬性。

??var() 函數用于讀取自定義屬性,將自定義屬性當作 var() 函數的第一個參數傳進去。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

??var() 函數還可以使用第二個參數，表示自定義屬性的默認值。如果該自定義屬性不存在，就會使用這個默認值。

color: var(--foo, #7F583F);
font-family: var(--font-stack, "Roboto", "Helvetica");
padding: var(--pad, 10px 15px 20px);

??來做一道題：

body {
  --color: 20px;
  background-color: var(--color, skyblue);
}

??此時 的背景顏色是什么呢？

??經過分析，上面的CSS等同于：

body {
    --color: 20px;
    background-color: transparent;
}

這里需要注意的是，僅限于我們使用的自定義屬性沒有定義時，才使用后面的值作為元素的屬性值。
如果自定義屬性的值是不合法的，就會用缺省值代替。

??所以 的背景色就是缺省值transparent。

??var()函數還可以用在自定義屬性的聲明。

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

var() 函數可以代替元素中任何屬性中的值的任何部分。不過var() 函數不能作為屬性名、選擇器或者其他除了屬性值之外的值。

??例如下面的寫法是無效的：

.foo {
  --side: margin-top;
  /* 無效 */
  var(--side): 20px;
}

??CSS 自定義屬性不能像 Sass 這樣的處理器一樣直接做一些數學計算。如果你需要做一些數據計算，那么就要使用 CSS 的 calc() 函數。

/* 這是一種錯誤的使用方式 */ 
.margin { 
    --space: 20px * 2; 
    font-size: var(--space); 
}

??使用CSS自定義屬性要做一些數學計算時，應該像下面這樣通過calc()函數來完成：

.margin { 
    --space: calc(20px * 2); 
    font-size: var(--space); 
}

??如果使用下面的CSS，中的font-size大小是多少呢？

body {
  --size: 20;   
  font-size: var(--size)px;
}

??哈哈哈，機智的我一眼就看出了答案，font-size 的值是 20px！

在構建單個指令時要小心！

??當你設置如下所示的屬性值時，20px被解釋為單個指令（Tokens）。

font-size: 20px

??在這里，20px的值被視為一個多帶帶的實體。
??如果使用下面的這種寫法：

body {
  --size: 20;   
  font-size: var(--size)px;
}

??瀏覽器會將其解釋為 20 px。注意 20 和 px 之間有一個空格。
??如果你必須創建單個指令，則用一個 CSS 自定義屬性來表示整個指令，比如 --size: 20px 或者使用calc() 函數，比如 calc(var(--size) * 1px)（當 --size 設置為20時）。
??因此，最穩妥的做法是：

body {
  --size: 20px;   
  font-size: var(--size);
}

??或者使用CSS3 calc()計算：

body {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}

??此時， 的 font-size 大小才是 20px。

??在 JavaScript 中，變量有作用域一說。它們可能是全局作用域，也有可能是局部作用域。那么在CSS中，CSS自定義屬性也有這樣的說法。

:root { 
    --color: black; /* 全局作用域*/ 
} 
.block { 
    color: #8cacea; 
    --color: blue; /* 局部作用域；`--color`作用域是`.block`選擇器 */ 
}

:root 選擇器可以選擇到 DOM 元素中或 document 樹中最高頂級的元素。因此，在 :root 選擇器中聲明的CSS 自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。局部作用域就是它所在的選擇器的有效范圍。

??再來做一道題吧~

 
我是什么顏色？
我又是什么顏色？

    猜猜我的顏色吧~
  
我！還有我！可別忘了我的顏色呢! 


// CSS 
:root { 
    --color: purple; 
}
div { 
    --color: green; 
}
#alert { 
    --color: red; 
}
* { 
    color: var(--color); 
}

同一個 CSS 變量，可以在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。

??CSS自定義屬性和CSS屬性一樣，可以在元素的style屬性中使用CSS自定義屬性。

 
Click Me 
// CSS 
button { 
    border: 1px solid var(--color); 
} 
button:hover { 
    background-color: var(--color); 
}

參考文章：
圖解CSS：CSS自定義屬性
CSS變量教程 - 阮一峰