在前端开发的不断演进中，CSS 从最初的静态样式语言，逐渐成长为可编程、可动态更新的"样式系统"。在 CSS4（即 CSS Level 4 Modules） 的发展中，一个非常实用且颠覆传统的语法特性------CSS变量（Custom Properties） 被正式引入。
它不仅大幅提升了样式的可维护性和动态性，更为 CSS 与 JavaScript 的协作打开了新局面。
本文将通过示例代码，带你全面了解 CSS 变量的使用方式、原理与应用技巧。
一、什么是 CSS 变量？
在传统 CSS 中，我们经常会遇到类似这样的重复样式定义：
css
h1 {
color: #ff6600;
}
.button {
background-color: #ff6600;
border: 1px solid #ff6600;
}如果有一天需要修改颜色，就必须手动查找并替换所有出现的地方。这种重复既容易出错，又难以维护。
而 CSS 变量（Custom Properties） 的出现，完美解决了这个问题。
它允许我们像在 JavaScript 或 Sass 中那样，定义并复用变量：
css
:root {
--theme-color: #ff6600;
}
h1 {
color: var(--theme-color);
}
.button {
background-color: var(--theme-color);
border: 1px solid var(--theme-color);
}只要修改一次 --theme-color 的值，所有引用它的地方都会自动更新。
二、CSS 变量的基本语法
CSS 变量的定义和使用都非常直观：
1. 定义变量
变量需要以 -- 开头，并且必须定义在某个选择器中，最常见的是在 :root 根元素上定义：
css
:root {
--spacing: 10px;
--blur: 10px;
--base: rgb(239, 167, 25);
}
:root相当于 HTML 文档的根元素（<html>），在这里定义的变量是全局变量，可在任何地方使用。
2. 调用变量
使用时通过 var() 函数访问：
css
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}3. 设置默认值
如果变量未定义，可以指定一个备用值：
css
color: var(--theme, #333);这在大型项目中非常实用，可避免由于变量未定义导致的样式错误。
三、CSS 变量与 JavaScript 的结合
CSS 变量的另一大亮点，是可以通过 JavaScript 动态修改 。
这意味着我们可以在不重新加载 CSS 文件的前提下，实现样式的实时变化。
以下是一个完整的示例：
ini
<h2>Update CSS Variables with <span class="hl">JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input type="range" id="spacing" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color:</label>
<input type="color" id="base" name="base" value="#ffc600">
</div>
<img src="https://img1.baidu.com/it/u=1286495993,1977676821&fm=253">在 JavaScript 中，我们可以使用 document.documentElement.style.setProperty() 动态修改变量：
javascript
const inputs = document.querySelectorAll('.controls input');
inputs.forEach(input => input.addEventListener('change', handleUpdate));
function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}通过这个逻辑，滑动条可以实时改变图片的间距、模糊度、背景颜色------
这在传统 CSS 中几乎是不可能做到的。
四、CSS 变量的优势
1. 可复用性强
在大型项目中，CSS 变量可以集中管理主题样式，如颜色、字号、间距等。
只需修改一处，即可影响全局，极大减少维护成本。
2. 支持运行时修改
与 Sass 或 Less 不同，CSS 变量并不是编译时变量，而是 运行时变量 。
这意味着我们可以在浏览器中动态修改它，甚至根据用户行为实时更新 UI。
3. 作用域灵活
CSS 变量可定义在任意选择器中，不同选择器之间的变量会自动继承或覆盖：
css
:root {
--text-color: black;
}
.dark-mode {
--text-color: white;
}
p {
color: var(--text-color);
}切换 .dark-mode 类后，页面即可自动进入暗色主题模式。
4. 与预处理器兼容
CSS 变量可以与 Sass、Less 等预处理器混用，充分结合两者的优点：
Sass 提供编译时计算，而 CSS 变量则提供运行时控制。
五、CSS4 的发展方向与变量的地位
虽然"CSS4"并非一个正式版本号（W3C 已停止使用版本号命名规范），
但它象征着 CSS 技术向模块化、动态化迈进的新时代。
CSS Variables 正是其中的代表之一，其他新特性还包括：
@property声明语法（为变量定义类型和初始值）；- 新的选择器（如
:is(),:where()）； - 原生嵌套规则（类似 Sass 的嵌套语法）；
- 新的颜色函数（如
color-mix(),lab(),lch()）等。
例如，未来我们可以这样声明类型安全的变量：
css
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.box {
transform: rotate(var(--angle));
}六、实践与总结
CSS 变量为前端开发带来了三个重要变化：
- 样式动态化 ------ 不再需要切换样式表文件；
- 结构语义化 ------ 样式逻辑更清晰；
- 主题系统化 ------ 轻松实现暗色模式、个性皮肤等功能。
通过 HTML5 的输入控件与 JavaScript 的事件绑定，我们可以用极少的代码，打造一个可交互的"在线滤镜调节器"，这正是 CSS4 时代带来的灵活性与创造力的体现。
七、结语
CSS4 变量的出现，不仅是对样式表语言的补强，更是一次思想的革新。
它让 CSS 具备了"编程"的能力，让设计与交互更紧密融合。
在未来的前端开发中，掌握并善用 CSS 变量，将是每位开发者的基本功。