一瓢喉、變量的作用
在任何語言中，變量的有一點(diǎn)作用都是一樣的绸罗，那就是可以降低維護(hù)成本，附帶還有更高性能驶兜，文件更高壓縮率的好處。
二远寸、CSS變量var()語法和用法和特性
CSS中原生的變量定義語法是：--*抄淑，變量使用語法是：var(--*)，其中*表示我們的變量名稱驰后。在CSS變量中肆资，命名可以以數(shù)字開頭，例如：
:root {
--1: #369;
}
body {
background-color: var(--1);
}
但是灶芝，不能包含$郑原，[，^夜涕，(犯犁，%等特殊字符，普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合女器，但是可以是中文酸役，日文或者韓文，例如：
body {
--深藍(lán): #369;
background-color: var(--深藍(lán));
}
所以，我們就可以直接使用中文名稱作為變量.
無論是變量的定義和使用只能在聲明塊{}里面涣澡，例如贱呐，下面這樣是無效的：
--深藍(lán): #369;
body {
background-color: var(--深藍(lán));
}
變量也是跟著CSS選擇器走的，如果變量所在的選擇器和使用變量的元素沒有交集暑塑，是沒有效果的吼句。
例如#alert定義的變量，只有id為alert的元素才能享有事格。如果你想變量全局使用，則你可以設(shè)置在:root選擇器上搞隐；
CSS變量使用的完整語法為：var( <custom-property-name>, <declaration-value>)
意思就是驹愚，如果我們使用的變量沒有定義（注意，僅限于沒有定義）劣纲，則使用后面的值作為元素的屬性值逢捺。舉個例子：
.box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
}
則此時的背景色是#cd0000：
CSS變量不合法的缺省特性
請看下面這個例子：
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
請問，此時<body>的背景色是癞季？
A. transparent B. 20px C. #369 D. #cd0000
答案是 A. transparent
對于CSS變量劫瞳，只要語法是正確的，就算變量里面的值是個亂七八糟的東西绷柒，也是會作為正常的聲明解析志于，如果發(fā)現(xiàn)變量值是不合法的，例如上面背景色顯然不能是20px废睦，則使用默認(rèn)值代替伺绽，于是，上面CSS等同于：
body {
--color: 20px;
background-color: #369;
background-color: transparent;
}
CSS變量的空格尾隨特性
body {
--size: 20;
font-size: var(--size)px;
}
請問嗜湃，此時<body>的font-size大小是多少奈应？
實際上，此處font-size:var(--size)px等同于font-size:20 px购披，注意杖挣，20后面有個空格，所以刚陡，這里的font-size使用的是<body>元素默認(rèn)的大小惩妇。因此，還是使用穩(wěn)妥的做法：
body {
--size: 20px;
font-size: var(--size);
}
或者使用CSS3 calc()計算：
body {
--size: 20;
font-size: calc(var(--size) * 1px);
}
此時橘荠，<body>的font-size大小才是20px屿附，
例子1、2哥童、3挺份、4
