在css中, 我们可以使用自定义属性(也被叫做css变量)来定义变量。这些变量可以再文档得根元素（:root 选择器）中来定义，可以再整个样式中重复使用，便于后期更改和维护
定义变量
在css中，使用 - 前缀来定义变量，变量得命名可以由字母、数字、下划线组成，但必须是字母开头，通常放在选择器规则集内或者在根元素（:root）中定义，例如：
:root {--textColor: red;--bgColor: #000;
}
使用变量
在使用变量时，需要使用var()函数将变量包裹起来。例如：
<style>
.text1{color: var(--textColor);
}
.text1 .textSpan{background: var(--bgColor);
}
</style><body><div class="text1">这一行文本使用的是textColor变量</div><div class="text1"><span class="textSpan">这一行本文本使用的是bgColor变量</span></div>
</body>
如果变量的值需要js来修改，如下：
document.documentElement.style.setProperty('--bgColor', 'pink');
效果如下：
