定義
CSS Variables，也稱為CSS變量哟沫。由CSS定義的一種實體，可包含指定值嗜诀，并在整個document中復(fù)用。
聲明
element {
? ? --custom-color: blue;
}
- 必須以“—”（兩個dash）開始變量名稱发皿，比如“—custom-color”筑公。
- 大小寫敏感。
用法
用var()來獲取并使用CSS變量封救。
element{
? ? background-color: var(--custom-color);
}
這里var的語法是這樣的：
var( < custom-property-name > [, < declaration-value > ]? )
第一個參數(shù)對應(yīng)CSS變量的名稱，第二個為默認值誉结，如果第一個參數(shù)對應(yīng)的CSS變量未定義券躁，則使用這個默認值掉盅。
第二個參數(shù)還可以是多個通過逗號分隔的值趾痘，與shorthand values不同蔓钟。
注意點
- CSS變量會從它的父節(jié)點繼承下來。
- var()不能作為屬性名滥沫。
- var()不能只作為值的一部分（比如不允許“margin-top: var(—gap)px;”），而必須作為整個值世分，或者使用calc缀辩，比如“margin-top: calc(var(—gap) * 1px);”。
- IE不支持CSS變量臀玄。
操作CSS變量
可以通過JavaScript操作CSS變量：
// 獲取
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// 設(shè)置
document.documentElement.style.setProperty('--primary-color','green');
document.documentElement.style.setProperty('--primary-color','var(--secondary-color)');
黑科技
CSS變量可以包含任何合法的值镐牺，比如“—foo: if(x > 5) this.width = 10; ”睬涧。雖然對于大部分CSS來說這個值是無效的旗唁，但是可以在運行時通過JavaScript做一些事情。
