css是可以支持變量，且所有主流瀏覽器都支持拟糕。css變量又稱"css自定義屬性",css的變量聲明是以“--”前綴判呕，而前綴是"$"或"@"被預處理器sass或less占用，所以送滞，css以"--"開頭可以避免與預處理器產(chǎn)生沖突,
- css的變量名是區(qū)分大小寫的侠草，--primary-size和--Primary-Size是完全不同的。
2.屬性名可以包含數(shù)字犁嗅，字母边涕，以及下劃線或者短橫線，也可以是中文褂微，日文或者韓文功蜓，但不能是屬性名或數(shù)字開頭，不能包含$蕊梧，[霞赫，^，(肥矢，%等字符端衰。
3.變量--primary只能用屬性值叠洗，不能用作屬性名
.foo {
--primary: margin-top; /* 無效 */
var(--primary): 2px;
}
4.數(shù)字和單位直接寫一起需使用calc()函數(shù)
--gap: 20;
margin-top: calc(var(--gap) * 1px);
/**錯誤的方式**/
--font-size:10px *3;
--sum:'10px';/*不能帶字符串，否則失效*/
padding-top:var(--sum)
/**正確的方式**/
--font-size:calc(10px *3);
--sum:10px旅东；
padding-top:var(--sum)
拓展
cal()函數(shù)支持 "+", "-", "*", "/" 運算灭抑，需要注意的是，運算符前后都需要保留一個空格抵代，例如：width: calc(100% - 10px)腾节；
任何長度值都可以使用calc()函數(shù)進行計算；
calc()函數(shù)使用標準的數(shù)學運算優(yōu)先級規(guī)則荤牍；
5.變量的值是字符串時案腺，可以直接拼接
:root{
--screen-category: 'category' //變量值是字符串
}
body:after {
content: '--screen-category: 'var(--screen-category); // 直接拼接
}
6.var()函數(shù)第二個參數(shù)是設置默認值，若該變量不存在康吵，則使用此默認值
color: var(--foo, #7F583F);
7.css變量可以在任意選擇器中使用包括在標簽元素style及@media中
/**style*/
.wrapper .card {
animation: animate 15s linear infinite;
animation-delay: calc(3s * var(--delay));
}
<div class="card" style="--delay:1"></div>
/**@media*/
:root{
--column-size:4;
}
@media screen and (min-width: 1200px) {
:root{
--column-size: 3;
}
}
若想了解更深可看大神文章：
https://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/
