一：引言

在项目开发过程中，有时候我们需要对一个变量进行全局多处使用，那么有什么办法呢？

二：使用

1：声明方式：以--开头

2：继承性：遵循继承规则，子元素未显式声明时继承父级变量

3：调用变量：通过var()函数引用变量

4：动态修改：可以通过实时修改变量值

5：变量拼接：

字符串拼接=>content: var(--text)'追加内容'

数值需结合calc()计算=>width: calc(var(--size) * 1px)

三：作用域

1：全局作用域=>:root下

/* CSS */
:root {
  --primary-color: #42b983;  /* 默认主题色 */
  --bg-color: #ffffff;
}

2：局部作用域=>属性下

.dark-theme {
  --primary-color: #2c3e50;  /* 暗色主题 */
  --bg-color: #34495e;
}

四：代码

/* CSS */
:root {
  --primary-color: #42b983;  /* 默认主题色 */
  --bg-color: #ffffff;
}

.dark-theme {
  --primary-color: #2c3e50;  /* 暗色主题 */
  --bg-color: #34495e;
}

.box {
  background-color: var(--bg-color);
  color: var(--primary-color);
  padding: 20px;
  transition: all 0.3s;  /* 平滑过渡效果 */
}

五：总结

1：可维护性=>中管理颜色、字号等重复值，修改一处即可全局生效，减少冗余代

2：主题切换=>通过修改变量快速实现整体视觉风格调整

3：减少预处理依赖=>原生支持动态变量，降低对 Sass/Less 等预处理器的依赖‌

六：拓展

1：使用 @property 注册变量类型

@property --progress {
  syntax: '<number>';      /* 定义变量类型为数值 */
  inherits: false;
  initial-value: 0;
}

.loader {
  --progress: 0;
  width: calc(var(--progress) * 1%);
  transition: --progress 0.5s;  /* 启用数值过渡动画 */
}