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

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

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

??當(dāng)我們的項(xiàng)目中有很多CSS文件時(shí)，無形中增加了維護(hù)成本。即便使用了CSS框架，雖然這些框架都有可能引入了Sass這樣的CSS處理器幫助我們減少了出錯(cuò)的機(jī)會，提高了可維護(hù)性的能力，但這種通過添加額外步驟的方式（需要做編譯處理），可能會增加系統(tǒng)的復(fù)雜性。
??CSS自定義屬性的出現(xiàn)，為我們帶來了一些CSS處理器的便利，并且不需要額外的編譯。在CSS中使用CSS自定義屬性的好處和在編寫語言中使用變量的好處沒有特別的不同之處。W3C規(guī)范上有過這樣的一段描述：
??使用CSS自定義屬性使得大文件更易于閱讀，因?yàn)榭雌饋砗茈S意的值有了一個(gè)提示信息的名字，并且編輯這些文件更加簡單，更不易于出錯(cuò)。因?yàn)槟阒恍枰谧远x屬性處修改一次，這個(gè)修改就會應(yīng)用到使用該自定義屬性的任何地方。
??另外，CSS自定義屬性除了提供了更靈活的設(shè)置、引用和修改的便利性之外，還具有較強(qiáng)的語義化（比如primary這樣的名稱總是要比red這樣的名稱來得有意義）。這些語義化信息讓你的CSS文件變得易讀和理解。
??為此，可讀性和可維護(hù)性是CSS自定義屬性最大的優(yōu)勢。并且，它讓我們可以在CSS中使用原生的變量，而不再需要借助于類似Sass這樣的CSS處理器。

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

??CSS自定義屬性和常規(guī)CSS屬性的用法是一樣的。把它們當(dāng)作動態(tài)屬性會比變量更好。這意味著它們只能在聲明塊中使用。也就是說，自定義屬性和選擇器是強(qiáng)綁定的?？梢允侨魏斡行У倪x擇器。
??如果已聲明的CSS自定義屬性未被任何屬性調(diào)用的話，將不會產(chǎn)生任何的效果。只會是一段字符串停留在你的樣式文件中。
??聲明自定義屬性的時(shí)候，自定義屬性名前面要加兩根連詞線（--）。

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

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

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

??var() 函數(shù)用于讀取自定義屬性,將自定義屬性當(dāng)作 var() 函數(shù)的第一個(gè)參數(shù)傳進(jìn)去。

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

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

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);
}

??此時(shí) 的背景顏色是什么呢？

??經(jīng)過分析，上面的CSS等同于：

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

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

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

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

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

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

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

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

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

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

??使用CSS自定義屬性要做一些數(shù)學(xué)計(jì)算時(shí)，應(yīng)該像下面這樣通過calc()函數(shù)來完成：

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

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

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

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

在構(gòu)建單個(gè)指令時(shí)要小心！

??當(dāng)你設(shè)置如下所示的屬性值時(shí)，20px被解釋為單個(gè)指令（Tokens）。

font-size: 20px

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

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

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

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

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

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

??此時(shí)， 的 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); 
}

同一個(gè) CSS 變量，可以在多個(gè)選擇器內(nèi)聲明。讀取的時(shí)候，優(yōu)先級最高的聲明生效。

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

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

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