瀏覽器支持情況
請(qǐng)看瀏覽器支持狀況焕襟，就目前國(guó)內(nèi)而言掸驱，移動(dòng)混合開發(fā)肛搬、微信開發(fā)，都支持CSS變量毕贼。PC端不可考慮温赔。
基本用法
全局用法
這是全局作用域的css變量以及用法：
:root {
--main-color: #f40;
--block-font-size: 10px;
}
.aaa {
color: var(--main-color);
}
任何地方想使用變量，只需要var()這個(gè)變量即可帅刀。
局部用法
這是局部作用域的css變量以及用法：
<style>
.a {
--main-color: #f40;
--block-font-size: 10px;
}
.aaa {
color: var(--main-color);
}
</style>
</head>
<body>
<div class="a">
<p class="aaa">否定偽類選擇符 E:not(s)</p>
</div>
</body>
也就是說让腹，變量可以像普通聲明一樣寫在某個(gè)類（或其他任何選擇器）里，就可以影響所有后代選擇器扣溺。
變量名規(guī)定
css變量名跟js的變量名比起來(lái)寬松得多骇窍，比如可以使用數(shù)字作為變量名，但是一些IDE會(huì)有警告锥余。所以腹纳，為了不引起歧義，還是盡量使用嚴(yán)苛的變量名起名法則，可以使用駝峰或者短橫線寫法嘲恍，最后足画，別忘了前面加兩個(gè)-。
變量值規(guī)定
一句話佃牛，凡是css合法值淹辞，都可以作為變量值，并不限于單個(gè)值俘侠，比如20px 20px 20px是合法的象缀。
調(diào)用規(guī)定
必須按照語(yǔ)法var( <自定義變量名> [, <默認(rèn)值 ]? )來(lái)寫，可以是var(--aa)也可以是var(--aa, 20px 20px)爷速，逗號(hào)后面的值就是默認(rèn)值央星，當(dāng)變量名不存在的時(shí)候，默認(rèn)值生效惫东。
可以連續(xù)使用var拼接成一個(gè)css屬性值：margin: var(--aa) var(--bb);
下面這個(gè)例子中莉给，沒有bb這個(gè)變量，但是后面的默認(rèn)值本身又帶有逗號(hào)廉沮，這種寫法是否合法呢颓遏？
.aaa {
color: rgb(var(--bb, 255, 255, 255));
}
是合法的，也就是說废封，瀏覽器會(huì)把第一個(gè)逗號(hào)之后的內(nèi)容一概當(dāng)做默認(rèn)值州泊。
當(dāng)變量值書寫錯(cuò)誤，那么就算引用變量的時(shí)候默認(rèn)值糾正正確漂洋，也無(wú)濟(jì)于事遥皂，會(huì)出錯(cuò)。比如：
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
background-color是不可能值為20px的刽漂，那么你用#cd0000糾正也沒有用演训，此時(shí)background-color會(huì)等于默認(rèn)值rgba(0, 0, 0, 0)，也就是透明贝咙。所以样悟，千萬(wàn)別寫錯(cuò)。
變量引用
一個(gè)變量比如--aa庭猩，可以被--bb引用：
body {
--aa: 3px;
--bb: var(--aa);
}
結(jié)合calc計(jì)算
一句話說窟她，該怎么寫就怎么寫，變量值的變化會(huì)引起重新計(jì)算蔼水。
變量重新賦值
就像js變量一樣震糖，css變量可以重新賦值，這種重新賦值跟書寫順序相關(guān)趴腋，也跟js一樣吊说。比如：
<style>
.a {
--mar: 20px 20px;
}
.b {
margin: var(--mar);
}
.c {
--mar: 40px 40px;
}
.d {
margin: var(--mar);
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c">
<div class="d"></div>
</div>
</div>
</div>
</body>
這里.d的margin就不是20px 20px论咏。
需要強(qiáng)調(diào)的是，變量重新賦值會(huì)導(dǎo)致依賴它的其他變量的值也會(huì)改變颁井，這跟js是一致的厅贪。比如：
.box {
--columns: 4;
--margins: calc(24px / var(--columns));
--space: calc(4px * var(--columns));
--fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
.box {
--columns: 3;
}
}
@media screen and (max-width: 900px) {
.box {
--columns: 2;
}
}
@media screen and (max-width: 600px) {
.box {
--columns: 1;
}
}
當(dāng)瀏覽器寬度有變化的時(shí)候，--columns會(huì)變化雅宾，連帶--margins养涮、--space、--fontSize會(huì)一起發(fā)生變化秀又，所以只需要改變--columns就可以了单寂。
js向css傳值
js給css變量傳值的辦法是使用el.style.setProperty()方法，比如：
<style>
.b {
color: var(--theme-color);
}
</style>
<div class="a">a
<div class="b">b
<div class="c">c
<div class="d">d</div>
</div>
</div>
</div>
<script>
const aEl = document.querySelector('.a');
aEl.style.setProperty('--theme-color', 'red');
</script>
給a元素設(shè)置變量吐辙，會(huì)影響自身和所有后代元素，但是如果.a自身并沒有寫color: var(--theme-color);蘸劈，那么就可以做到只影響后代元素昏苏，不影響自身。
如果想給自身和后代元素設(shè)置默認(rèn)值(即blue)威沫，可以寫一條：
.a {
--theme-color: blue;
}
js讀取css變量
讀取辦法是使用window.getComputedStyle(el).getPropertyValue('--theme-color')方法贤惯。比如：
<style>
.a {
--theme-color: blue;
}
.b {
color: var(--theme-color);
}
</style>
<div class="a">a
<div class="b">b
<div class="c">c
<div class="d">d</div>
</div>
</div>
</div>
<script>
const el = document.querySelector('.a');
const themeColor = window.getComputedStyle(el).getPropertyValue('--theme-color');
console.log(themeColor); // blue
</script>
