零.序言
前兩天在逛 blog 的時候看見一些內聯樣式新奇的寫法時很納悶，雖然說不上多么熟練，但是從來沒見過 --color: brown 這樣的寫法，百度一番之后仍然沒啥頭緒，今天偶然看到一篇文章之后才知道這是 css 變量，不禁感嘆自從 V8 引擎之后花樣越來越多。經過翻查總結(也沒啥總結的，翻過文檔之后挺簡單的)，記錄如下：
一、基本用法
變量聲明：
變量聲明的時候，變量名之前加上兩根連詞線（--）即可。例如：
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
大小寫敏感、變量名等這些參考 js 變量名規則肯定不會錯，而變量名中存儲的值的書寫規則仍然采用 css 的規則，如： --x: 20px 30px 而不是 --x: '20px 30px' 。
變量使用：var() 函數
var() 函數是用來讀取變量，如下例：
a {
--foo：#f1f2f5;
--bar: red;
color: var(--foo);
text-decoration-color: var(--bar);
}
var() 函數有第二個參數，表示變量的默認值，如果該變量不存在(第一個參數)，那么就使用這個默認值。並且，第一個參數后面的全部算第二個參數，不管有多少個逗號，比如：
var(--font-stack, "Roboto", "Helvetica"); var(--pad, 10px 15px 20px);
另外， var() 函數也可作為其他變量的值，但也僅作為其他變量的值使用：
:root {
--primary-color: red;
--logo-text: var(--primary-color);
/* 無效 */
var(--primary-color): green;
}
作用域：
同一個 CSS 變量，可以在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。這與 CSS 的”層疊”（cascade）規則是一致的。
<style>
:root { --color: blue; } // 這個選擇器等價於 html {}
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>猜我的顏色是什么</p> // blue
<div>猜我的顏色是什么</div> // green
<div id="alert">猜我的顏色是什么</div> // red
二、能幫助我們干什么？
我個人的感覺就像是一個先行性方案，潛力很大，能用的地方很多，輪子慢慢造，目前我碰到的用處有：
- 方便維護；（這樣說感覺很籠統）
- 響應式布局；（稍微減少了點代碼量）
- 配合 calc() 函數，完成計算；
- ...
三、js 的支持
js 中對於 css 的變量操作如下：
// 設置變量
document.body.style.setProperty('--primary', '#7F583F’);
// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 刪除變量
document.body.style.removeProperty('--primary');
如下例：
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
四、其他
css 變量提供了 css 與 js 通信的一個新的渠道，自由性相應變廣了。
只是就目前來講，我們需要注意各大瀏覽器的兼容性，攤手。