CSS变量，也称为自定义属性，是一种在CSS中定义和重用值的方式。它们允许开发者在一个地方定义样式值，然后在整个样式表中引用这些值，从而提高代码的可维护性和可读性。
1、定义和使用CSS变量
CSS变量的定义和使用非常简单。变量名以两个连字符开头，变量值为任何有效的CSS值。它和其他CSS属性一样，可以在任何选择器中定义。以下是一个基本示例：
:root {
--main-bg-color: #3498db;
--main-text-color: #ffffff;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
在这个示例中，我们在 :root 选择器中定义了两个变量：--main-bg-color 和 --main-text-color。然后，我们使用 var() 函数在 body 选择器中引用这些变量。
在变量的定义中有以下几个约束：
- 变量名：以两个两字符开头，区分大小写；
- 变量值：可以是任何有效的CSS属性值；
- 语法：写任何css样式集一样；
2、变量的作用域及继承性
在定义中，我们提到，CSS变量的定义，语法和写任何css样式集一样，那么它是否也存在作用域集相应的继承特性呢？答案是肯定的。
2.1、CSS变量的作用域
CSS变量的作用域类似于 ES中变量作用域：全局作用域 和 “函数作用域”。注意"函数作用域"打了引号。
全局作用域：顾名思义就是定义后，可以在HTML文档的任何递地方访问到。定义在根伪类:root下：
:root{
--theme-color: blue;
--theme-border-color: #c2c2c2;
--theme-font-size: 16px;
}
“函数作用域”：在特定的选择器中定义，从而只在该选择器及其子元素中可以访问到。例如：
<style>
.context {
--text-color: red;
}
p {
--text-color: blue;
}
.context {
color: var(--text-color);
}
p {
color: var(--text-color);
}
</style>
<body>
<div class="context">
我的类是context
<p>我是context内部的p标签</p>
</div>
<p>我是p标签。<span>我是p内部的span标签</span></p>
</body>
效果：
2.2、CSS变量的继承性
自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被继承并生效。看这一段 HTML：
<style>
.two {
--test: 10px;
}
.three {
--test: 2em;
}
</style>
<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
</div>
在这个情况下，var(--test)的结果分别是：
- 对于元素 class="two" ：10px
- 对于元素 class="three" ：2em
- 对于元素 class="four" ：10px （继承自父属性）
- 对于元素 class="one" ：非法值，会变成自定义属性的默认值。
2.3、问题
针对 class="one"的问题该如何处理呢？我们知道在定义js函数时，我们可以为变量设置默认值，防止参数未传递，那么在css变量的场景呢，是否有同样的解决方案呢。有，它叫“自定义属性备用值”，只是它是在使用时设置的。
用 var() 函数时，可以定义多个备用值，当给定变量未定义时，将会按序使用备用值替换。所以var() 的用法格式我们可以看做如下：
/* var(变量名[, 备用值1][, 备用值2][, 备用值3]...) */
/* 针对class=“one”元素，我们可以优化成如下写法：*/
.one {
padding-left: var(--test, 20px)
}
3、如何使用JavaScript动态设置CSS变量
我们知道，任何css相关的内容，都能在 JavaScript 中获取或者修改，那么CSS变量呢？答案是肯定的，而且它和普通的CSS属性的操作是一样的：
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);
总结
从css变量的概念可以看出，它为Web开发带来了极大的灵活性和可维护性。通过使用CSS变量，开发者可以更轻松地管理和更新样式，提高代码的可读性，并实现动态效果。无论是简单的颜色定义还是复杂的主题切换，CSS变量都是现代Web开发中不可或缺的工具。
