CSS 變量
今年三月，微軟宣布 Edge 瀏覽器將支持 CSS 變量止毕。這個(gè)重要的 CSS 新功能毛肋，所有主要瀏覽器已經(jīng)都支持了积蜻。
變量的聲明
聲明變量的時(shí)候，變量名前面要加兩根連詞線（--）。
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
變量名大小寫(xiě)敏感，--header-color和--Header-Color是兩個(gè)不同變量。
var() 函數(shù)
var()函數(shù)用于讀取變量昆码。
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
var()函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值邻储。如果該變量不存在赋咽，就會(huì)使用這個(gè)默認(rèn)值。
a {
color: var(--foo, #7F583F);
text-decoration-color: var(--bar);
}
第二個(gè)參數(shù)不處理內(nèi)部的逗號(hào)或空格吨娜，都視作參數(shù)的一部分脓匿。
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
var()函數(shù)還可以用在變量的聲明。
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
注意萌壳，變量值只能用作屬性值亦镶，不能用作屬性名日月。
.foo {
--side: margin-top;
/* 無(wú)效 */
var(--side): 20px;
}
變量的類型
如果變量值是一個(gè)字符串，可以與其他字符串拼接缤骨。
--bar: 'hello';
--foo: var(--bar)' world';
如果變量值是數(shù)值爱咬，不能與數(shù)值單位直接連用。
.foo {
--gap: 20;
/* 無(wú)效 */
margin-top: var(--gap)px;
}
上面代碼中绊起，數(shù)值與單位直接寫(xiě)在一起精拟，這是無(wú)效的。必須使用calc()函數(shù)虱歪，將它們連接蜂绎。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
如果變量值帶有單位，就不能寫(xiě)成字符串笋鄙。
/* 無(wú)效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}
兼容性處理
a {
color: #7F583F;
color: var(--primary);
}
也可以使用@support命令進(jìn)行檢測(cè)师枣。
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
JavaScript 操作
JavaScript 也可以檢測(cè)瀏覽器是否支持 CSS 變量。
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
JavaScript 操作 CSS 變量的寫(xiě)法如下萧落。
// 設(shè)置變量
document.body.style.setProperty('--primary', '#7F583F');
// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 刪除變量
document.body.style.removeProperty('--primary');
這意味著践美，JavaScript 可以將任意值存入樣式表。下面是一個(gè)監(jiān)聽(tīng)事件的例子找岖，事件信息被存入 CSS 變量陨倡。
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
那些對(duì) CSS 無(wú)用的信息，也可以放入 CSS 變量许布。
--foo: if(x > 5) this.width = 10;
上面代碼中兴革，--foo的值在 CSS 里面是無(wú)效語(yǔ)句，但是可以被 JavaScript 讀取蜜唾。這意味著杂曲，可以把樣式設(shè)置寫(xiě)在 CSS 變量中，讓 JavaScript 讀取袁余。
所以解阅，CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑。
