CSS 变量是什么？它和 Sass 变量有什么区别？
简化版
CSS 变量也叫自定义属性，是运行时参与级联、继承和计算的变量；Sass 变量是构建时替换的预处理变量。CSS 变量适合主题切换、组件设计令牌和运行时动态样式，Sass 变量更适合编译期复用和生成样式。
详细版
- CSS 变量用
--name定义，用var(--name, fallback)读取。 - 它遵循 CSS 级联和继承规则，可以在不同作用域覆盖。
- Sass 变量编译后不存在，浏览器无法在运行时感知。
- CSS 变量可以配合
[data-theme]、媒体查询、JS 动态切换主题。 - 工程上常把颜色、间距、圆角、阴影等设计令牌放到 CSS 变量里。
完整版教学
记忆钩子：Sass 变量像“打印前改稿”，CSS 变量像“页面运行时可调旋钮”。
一、这题真正考什么
记忆钩子：Sass 变量像“打印前改稿”，CSS 变量像“页面运行时可调旋钮”。
面试官不是只想听定义，而是想看你能不能把 CSS 规则、浏览器渲染、工程维护和用户体验连起来。回答这类题时，先讲机制，再讲例子，最后讲排查方法和边界。
二、底层机制怎么理解
CSS 自定义属性是浏览器原生能力，它保留在最终 CSSOM 中，能被级联、继承、媒体查询和 JavaScript 影响。因为它是运行时值，所以同一个组件可以不重新构建就响应主题变化。Sass 变量则在构建阶段展开，适合写样式源码时复用，但无法表达用户实时切换主题后的值。
CSS 面试题的关键通常在“规则为什么这样生效”。只要能讲清浏览器按什么顺序匹配、计算、布局和绘制，就不会停留在背属性名的层面。
三、带数字的小推演
一个站点有浅色和深色主题，使用 Sass 变量需要生成两套选择器或重新编译；使用 CSS 变量只要在 :root 和 [data-theme="dark"] 覆盖 20 个 token，100 个组件都能自动继承新值。
下面把判断过程压成几条可复用规则，面试时可以直接照这个顺序推：
定义：--brand-color: #2563eb
使用：color: var(--brand-color, #000)
运行时切换：document.documentElement.dataset.theme = "dark"四、浏览器处理流程
可以把它放进浏览器处理链路里看：
:root 定义默认 token
|
[data-theme="dark"] 覆盖 token
|
组件使用 var(--token)
|
浏览器按级联和继承计算最终值
|
无需重新编译即可更新 UI流程图能帮你避免两个常见问题：一是把 CSS 属性当成孤立开关，二是忽略父级、上下文和渲染阶段的影响。真正排查线上样式问题时，沿流程定位通常比随机改 CSS 更快。
五、对比表格
| 维度 | CSS 变量 | Sass 变量 |
|---|---|---|
| 生效阶段 | 浏览器运行时 | 构建编译时 |
| 是否参与级联 | 是 | 否 |
| 是否可被 JS 改 | 方便 | 不直接支持 |
| 适合场景 | 主题、设计令牌、动态样式 | 源码复用、循环生成、函数计算 |
对比题不要只背结论，要主动补一句“适合什么场景”。CSS 的很多选择没有绝对优劣，只有是否符合布局、可维护性、性能和可访问性目标。
六、工程实践和排查思路
- CSS 变量的值如果写错，可能到使用处才暴露问题，调试时要看 computed style。
- 不要把所有局部临时值都做成全局变量，否则 token 命名会失控。
- 使用 DevTools 时要同时看 matched rules、computed style、layout、accessibility 和 event listeners，避免只盯着源码。
- 组件库项目要把这类规则沉淀成 token、基础样式或 lint 约束，否则同类问题会反复出现。
七、常见误区与追问
- 误区：CSS 变量只是 Sass 变量的浏览器版本。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：CSS 变量一定会明显影响性能。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 误区：主题切换必须靠 JS 改每个元素样式。 需要补上浏览器机制、适用条件和反例，避免把经验口诀当成规则本身。
- 追问：CSS 变量为什么能天然支持组件作用域覆盖？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：如何设计设计令牌层级？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
- 追问：CSS 变量和 calc 可以怎么配合？ 先给判断标准，再结合代码、浏览器行为和工程约束说明取舍。
八、加强记忆
CSS 变量抓住“运行时、级联、继承、可覆盖”四个词。只要题目涉及主题切换、组件皮肤、用户偏好，就优先想到 CSS 变量。
复习 HTML/CSS 高频题时，可以固定按“定义、触发条件、浏览器流程、代码例子、工程风险、排查工具”六步组织答案。这样不会只停留在背概念，也更像真实前端开发者。