CSS變量（CSS variable）
CSS變量 是由CSS作者定義的實體，其中包含要在整個文檔中重復使用的特定值。使用自定義屬性來設置變量名，並使用特定的var()來訪問。
一、CSS變量的用途
構建大型站點時，在這些網頁中，有大量的CSS樣式，並且會在許多場合大量重復的使用。比如說：為了保持一種配色方案，在這個配色方案中會有一些顏色經常重復出現在CSS樣式表中。如果想要修改配色方案，不論是想單獨修改某個顏色或是整套配色，都不是一個簡單的問題，而且很容易出錯。
CSS可以減輕工作的復雜性，更方便修改和添加。不需要額外的編譯。第二個好處就是變量本身是包含語義的信息。使CSS文件變得更易讀和容易理解。main-text-color比單純出現在文檔中的#00ff00要更加容易理解，特別是有相同顏色出現在不同的文件中時。
二、什么是CSS變量
CSS變量當前有兩種形式：
- 變量，就是擁有合法標識符和合法的值。可以被使用在任意的地方。可以使用var()函數使用函數
var(--main-size)會返回--main-size對應的值。
- 自定義屬性，這些屬性使用--*where*的特殊格式作為名字
--main-size:30px; 即聲明一個CSS語句，意思是：將30px賦值給--main-size變量。
注意：自定義屬性和常規屬性一樣，只作用在當前層級，如果沒有特別定義則將從其父元素繼承其值。
在之前的標准中，自定義屬性以var-作為前綴，后來才改成--前綴。Firefox 31和以后的版本遵循新標准。
三、變量的聲明
聲明變量之前，變量名之前要加上兩個連字符（--）
body{ --head-color:#ada5f3; --foot-color:#da56d4: }
在這個例子中，body選擇器中出現了兩個變量：--head-color 和 --foot-color。
CSS變量與color、background這些正式屬性並沒有什么不同，只是沒有默認含義。CSS變量其實與自定義的CSS屬性用法相同。CSS變量又叫做 CSS自定義屬性（CSS custom properties）之所以選用兩根連字符（--）表示CSS變量，是因為$foo 被Sass占用了，@foo被Less占用了，為了產生沖突，所以就改用（--）表示CSS變量了
注意：變量名的大小寫敏感，--head不同於--Head，這是兩個不同的變量。
變量的作用域
一個變量的作用域是其對應的選擇器的作用范圍，div選擇器對應div的范圍，由於這個原因，全局的變量通常放在根元素:root里面，確保任何選擇器都可以讀取它們。
（一）聲明一個局部變量
element { --main-bg-color: brown;
}
（二）聲明一個全局變量
:root { --global-color: #666; --pane-padding: 5px 42px;
}
：root 這個偽類選擇器匹配的是文檔樹的根元素。對於HTML來說，：root表示的是<html>根元素，除了優先級更高以外，與html元素選擇器相同。
使用全局變量（在全局中聲明以后，其他選擇器也可以調用）
.demo{ color: var(--global-color);
}
四、var()函數
（一） var( ) 函數用以讀取變量，var（變量名）
.box{ --cor:#ddf; background-color: var(--cor); width:400px;height:40px;
}
（二） var()函數還可以使用第二個參數，表示變量的默認值。如果這個變量不存在，就會使用這個默認值
.box{ --cor:#ddf; background-color: var(--corlo , red); width:400px;height:40px;
}
在這個例子里，var()使用了兩個參數，變量--corlo和默認值red，由於不存在--corlo這個變量，所以使用red默認值。
注意：第二個參數不處理內部的逗號或是空格，都視為參數的一部分
font-size: var(--sizq,40px 12px);
（三） var()函數還可以用在變量的聲明
.box{ --cor:#ddf; --bacolor: var(--cor);
}
注意：變量只能用作屬性值，不能用作屬性名；
.box{ --size:font-size; var(--size):30px;
}
在這個例子中，變量--size用作屬性名，這是無效的
五、變量的類型
（一）字符串
如果變量值是一個字符串，可以與其他字符串進行拼串
--main-text:"hello";
--text:var(--main-text)"world ! ";
實例：（使用兩個變量值，使內容顯示為hello world）
span:before{ --main-text:"hello"; --text:var(--main-text)"world ! "; content:"--text: "var(--text); background: skyblue }
表現效果為
（二）數值
注意：如果變量的值為數值，則在使用的時候不可以與數值單位直接連用
.foo { --gap: 20;
/* 無效 */ margin-top: var(--gap)px;
}
本例中，使用時數值與單位直接寫在一起，這是無效的。必須使用 calc()函數，將它們連接。
span{ background: skyblue; --size:30; font-size:calc(var(--size)*1px); }
表現效果：
注意：如果變量賦值的時候帶有單位（例如：--size:20px;），就不能寫成字符串
/* 無效 */ .foo { --foo: '20px'; font-size: var(--foo);
}
/* 有效 */ .foo { --foo: 20px; font-size: var(--foo);
}
六、響應式布局
CSS 是動態的，頁面的任何變化，都會導致采用的規則變化。
利用這個特點，可以在響應式布局的 media命令里面聲明變量，使得不同的屏幕寬度有不同的變量值。
body { --primary: #7F583F; --secondary: #F7EFD2;
} a { color: var(--primary); text-decoration-color: var(--secondary);
} @media screen and (min-width: 768px) { body { --primary: #F7EFD2; --secondary: #7F583F;
} }
七、兼容性處理
瀏覽器兼容性
對於不支持CSS變量的瀏覽器，可采用下面的寫法（為了適應一些不支持CSS變量的瀏覽器，還可以在樣式中另外用CSS樣式單獨聲明以下）
span{ --size:30px; font-size:var(--size); font-size:30px;
}
可以使用 @supports 檢測瀏覽器是否支持CSS變量
@supports ( (--a: 0)) {
/* supported */
} @supports ( not (--a: 0)) {
/* not supported */
}
八、JavaScript操作
JavaScript也可以檢驗瀏覽器是否支持CSS變量
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ }
JavaScript操作CSS變量的寫法如下（這表示JavaScript可以實現將任意值存入CSS樣式表）：
// 設置變量
document.body.style.setProperty('--primary', '#7F583F'); // 讀取變量
document.body.style.getPropertyValue('--primary').trim(); // '#7F583F'
// 刪除變量
document.body.style.removeProperty('--primary');
實例：
為不同的元素設置顏色
CSS樣式
.one { color: white; background-color: skyblue; margin: 10px; width: 50px; height: 50px; display: inline-block;
} .two{ color:white; background:black; margin:10px; width:150px; height: 50px; display:inline-block;
} .three{ color:white; background-color:skyblue; margin:10px; width:75px;
} .four{ color:white; background-color:skyblue; margin:10px; width:100px;
} .five{ background-color: skyblue;
}
HTML
<div class="one"></div>
<div class="two"> Text <span class="five">- more text</span>
</div>
<input class="three">
<textarea class="four">Lorem Ipsum</textarea>
表現效果
在這個例子中我們發現CSS樣式中有很多重復的 background-color：skyblue；的背景顏色樣式設置，我們可以將背景顏色定義在更高的層級，然后通過CSS繼承性來接解決個問題，但是有時候這個方法並不一定好用。
我們可以在：root 選擇器中定義CSS變量，使用變量來減少重復的代碼
:root { --main-bg-color: skyblue;
} .one { color: white; background-color:var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block;
} .two{ color:white; background:black; margin:10px; width:150px; height: 50px; display:inline-block;
} .three{ color:white; background-color:var(--main-bg-color); margin:10px; width:75px;
} .four{ color:white; background-color:var(--main-bg-color); margin:10px; width:100px;
} .five{ background-color: var(--main-bg-color);
}
最終得到的效果是和上面一樣的
關於CSS變量的繼承性：
優先級低的繼承優先級高的變量，子元素繼承父元素的變量。
定義下面的CSS：
.two { --test: 10px; } .three { --test: 2em; }
在這個例子中，var(--test)的結果是：
class="two"對應的節點:10pxclass="three" 對應的節點: element:2emclass="four"對應的節點:10px(inherited from its parent)class="one"對應的節點: 無效值, 即此屬性值為未被自定義css變量覆蓋的默認值
參考博客：