CSS变量是什么
CSS变量是CSS中的一项功能，用于定义和重复使用可重用的值。它可以存储各种类型的值，如颜色、长度、字体等。
CSS变量也可以称为CSS自定义属性，因为CSS变量允许开发者自定义属性名并将其应用于样式表中，自定义的属性和其他的CSS属性没什么区别。
CSS变量的声明与读取
为了和SASS、LESS等预处理语言区分，CSS变量名声明需要以两个'-'开头，加上我们自定义的名称，如：--color、--width等
值得注意的是CSS变量名对大小写敏感，所以 --Color 和 --color是两个不同的变量
html {
--customWidth: 100px;
--customHeight: 100px;
--customColor: blue;
}读取CSS变量需要用到var()函数
div {
width: var(--customWidth);
height: var(--customHeight);
color: var(--customColor);
}var()函数可以设置默认值，当CSS变量不存在时则会使用这个默认值
div {
font-size: var(--customFontSize, 14px);
}
和JS的变量类似，var()函数也能用作变量声明
html {
--color: blue;
--buttonColor: var(--color);
}
CSS变量的作用域
同一个CSS变量可以在多个选择器中声明，读取的时候按照优先级的高低生效，这和CSS的层叠规则保持一致。
div {
--color: blue;
}
.red {
--color: red;
}
#green {
--color: green;
}
* {
color: var(--color);
}
<div>蓝色</div>
<div class="red">红色</div>
<div id="green">绿色</div>以上这段代码，div都应用了通配符的color属性，但是由于--color在不同的作用域设置的值不一样，所以分别显示了不同的颜色。
JS如何操作CSS变量
JS设置CSS变量：
document.body.style.setProperty('--color-red', 'red')
JS读取CSS变量：
document.body.style.getPropertyValue('--color-red')
JS删除CSS变量：
document.body.style.removeProperty('--color-red')
CSS变量的作用
虽然CSS变量是比较简单的，但是它给开发者带来很大的便利。
- 使用CSS变量可以减少我们样式变更的维护成本，在日常开发中，我们可以使用CSS变量可以将重复的样式值定义为变量，当遇到需要修改这个样式值的需求，我们可以直接修改变量值，不再需要逐一去修改。
- CSS变量与JS或者媒体查询相结合，可以使我们的网站交互更丰富。可以在运行时根据不同的条件或用户交互来修改变量的值，从而实现动态样式调整。比如：根据屏幕尺寸或用户首选项更改颜色、字体大小或布局。
- CSS变量可以用于实现主题切换功能。通过定义不同主题的变量集合，并在切换主题时更改这些变量的值或者修改变量作用域，可以达到一键修改网站主题的效果。
- CSS变量可以让我们的开发维护工作更轻松，CSS变量允许我们自定义变量名，在变量命名时，我们可以根据需要让我们的变量名更语义化，减少我们的沟通开发成本。比如：--text-color比一个#666更能让我们理解。
