一、基础变量
css也支持变量哦，把需要更改的地方设置成变量，一处设置，多处改变。
请看栗子：
通过--variableName创建样式变量，
使用var(--variableName)调用变量。
备用值
var(--variableName,defaultValue)：
- --variableName不存在的时候（移除则看到备用值的效果）
- 浏览器不支持，则应用备用值,当然你也可以不写备用值，但写上能方便及时发现问题，预防风险，对调试也有帮助。
.className {
--colorValue:gray
}
.className2 {
color: var(--colorValue, red);
}
.className3 {
color: var(--colorValue);
}
二、层级 CSS 变量
什么是层级变量？
你创建的变量不仅可以在你声明的变量里面使用，也可以在该元素的子元素里使用。
:root它就好像是html是body的容器一样，
:root 在它里面创建的变量，整个网页都生效。
:root {
--colorValue:pink;
}
三、更改特定区域的变量
:root里面定义的变量的作用域是作用于整个页面的，如果元素里也创建了相同的变量，则会把它给覆盖掉。
例子：将变量原来的颜色改为黑色
.className {
--colorValue:black;
}
四、使用媒体查询更改变量
当屏幕的宽度小于等于350px的时候，
--colorValue的值会被改变为red，那么应用了该变量的元素的样式则会发生响应式修改
@media (max-width: 350px) {
:root {
--colorValue:red;
}
}
