标准答案
- Sass / Less 是预处理器，代码会在构建期编译成普通 CSS。
- 它们适合模块拆分、嵌套、mixin、函数、循环和构建期静态计算。
- CSS 变量是浏览器运行时能力，可以参与级联、继承、主题切换和动态覆盖。
- 现代项目里预处理器可以负责生成结构化 CSS，CSS 变量负责暴露可运行时变化的 token。
- 如果项目只需要简单样式和主题变量，不一定必须引入预处理器。
题目解析
回答时抓住“构建期 vs 运行时”。浏览器看不到 Sass 变量，但能看到 CSS 自定义属性。
预处理器不会因为 CSS 变量出现就完全失去价值，但它不应该承担运行时主题切换。
代码示例
Sass 可以生成静态结构，CSS 变量保留运行时覆盖能力。
SCSS
$sizes: sm, md, lg;
@each $size in $sizes {
.button-#{$size} {
color: var(--button-color);
}
}常见误区
- 认为 Sass 变量和 CSS 变量只是语法不同。
- 用 Sass 变量做暗色模式，结果运行时无法按用户偏好切换。
- 为了嵌套写法引入复杂预处理链路，却没有实际工程收益。