一廓八、基礎(chǔ)變量
css也支持變量哦星掰，把需要更改的地方設(shè)置成變量，一處設(shè)置凤跑，多處改變粗蔚。
請看栗子：
通過--variableName創(chuàng)建樣式變量，
使用var(--variableName)調(diào)用變量饶火。
備用值
var(--variableName,defaultValue)：
- --variableName不存在的時候（移除則看到備用值的效果）
- 瀏覽器不支持鹏控，則應(yīng)用備用值,當(dāng)然你也可以不寫備用值，但寫上能方便及時發(fā)現(xiàn)問題肤寝，預(yù)防風(fēng)險当辐，對調(diào)試也有幫助。
.className {
--colorValue:gray
}
.className2 {
color: var(--colorValue, red);
}
.className3 {
color: var(--colorValue);
}
二鲤看、層級 CSS 變量
什么是層級變量缘揪？
你創(chuàng)建的變量不僅可以在你聲明的變量里面使用，也可以在該元素的子元素里使用义桂。
:root它就好像是html是body的容器一樣找筝，
:root 在它里面創(chuàng)建的變量，整個網(wǎng)頁都生效慷吊。
:root {
--colorValue:pink;
}
三袖裕、更改特定區(qū)域的變量
:root里面定義的變量的作用域是作用于整個頁面的，如果元素里也創(chuàng)建了相同的變量溉瓶，則會把它給覆蓋掉急鳄。
例子：將變量原來的顏色改為黑色
.className {
--colorValue:black;
}
四、使用媒體查詢更改變量
當(dāng)屏幕的寬度小于等于350px的時候堰酿，
--colorValue的值會被改變?yōu)閞ed疾宏，那么應(yīng)用了該變量的元素的樣式則會發(fā)生響應(yīng)式修改
@media (max-width: 350px) {
:root {
--colorValue:red;
}
}
