标准答案
- CSS 变量也叫自定义属性，写法是 --name: value，使用时通过 var(--name) 引用。
- 它是运行时能力，会参与级联、继承和作用域规则，可以被主题类、媒体查询、内联样式和 JavaScript 动态修改。
- Sass/Less 变量是构建期变量，编译成 CSS 后就会被替换成具体值，浏览器不知道变量存在。
- 所以 Sass/Less 更适合构建期计算、循环、函数和静态样式结构；CSS 变量更适合运行时主题、设计 token、用户偏好和动态样式。
- 工程里两者可以共存：预处理器负责生成静态结构，CSS 变量负责暴露运行时可变的设计值。
题目解析
这题可以按“构建期 vs 运行时”回答。只要讲清浏览器是否知道变量存在，差异就很清楚。
CSS 变量可以按作用域覆盖，这让组件主题和暗色模式更容易实现。
代码示例
CSS 变量可以在主题类里动态覆盖。
CSS
:root {
--color-primary: #35ad72;
--space-card: 16px;
}
.theme-dark {
--color-primary: #7dd3a8;
}
.button {
padding: var(--space-card);
background: var(--color-primary);
}常见误区
- 认为 CSS 变量和 Sass 变量完全一样，只是语法不同。
- 忘记 CSS 变量会继承和级联，导致组件内部变量被外层覆盖。
- 在需要构建期计算的地方强行用 CSS 变量，导致实现复杂。