Sass变量是编译时静态值，CSS变量是运行时可变机制；前者用于构建期确定样式（如断点、z-index），后者用于JS控制、主题切换等动态场景，二者职责分离不可混用。
预处理器本身不提供“全局变量”的跨文件自动继承能力，@import 或 @use 才是关键；直接在 Sass/Less/Stylus 中写 $primary-color: #007bff 并不能让所有组件自动感知——它只在当前作用域生效，除非你显式导入。
为什么 Sass 的 $variable 不等于 CSS 的 --var
Sass 变量是编译时静态值，输出后就固化成普通 CSS 值；CSS 自定义属性是运行时可变的，浏览器能响应 JS 修改或媒体查询切换。
两者定位不同：Sass 适合构建期生成确定样式（比如固定间距、字体大小），CSS 变量适合主题切换、用户偏好适配等动态场景。
常见误区是把 Sass 当成“CSS 变量替代品”，结果换肤时还得重编译整套 CSS，失去灵活性。
如何用 Sass 管理设计系统颜色并导出为 CSS 变量
真正可靠的模式是：用 Sass 统一维护色值源（如 $color-primary: #007bff），再在 :root 中批量生成对应的 CSS 变量，确保设计 token 一份维护、两端可用。
- 把所有基础色定义在
_tokens.scss中，命名语义化：$color-primary: #007bff;、$color-text: #333; - 新建
_css-vars.scss，用@each循环输出：:root { @each $name, $value in ($primary: $color-primary, $text: $color-text) { --color-#{$name}: #{$value}; } } - 确保
_css-vars.scss被最终 CSS 文件 import，且位置靠前（避免被后续规则覆盖） - JS 动态换肤时仍操作
document.documentElement.style.setProperty，而非改 Sass 变量
Less/Stylus 用户要注意的兼容陷阱
Less 的 @variable 和 Stylus 的 $variable 行为类似 Sass，但导出逻辑需手动适配：
立即学习“前端免费学习笔记（深入）”；
- Less 不支持原生
@each输出 CSS 变量，得靠插件（如less-plugin-custom-properties）或拼接字符串 + 后处理 - Stylus 的
for循环可生成:root规则，但注意其变量作用域：嵌套for中的$key必须用{key}插值语法，否则编译失败 - 所有预处理器生成的 CSS 变量，
var(--color-primary, #007bff)的 fallback 值必须是字面量，不能是另一个预处理器变量（如var(--color-primary, $color-primary)会报错）
别把预处理器变量当运行时开关
写 .btn { background: $color-primary; } 没问题，但试图用 @if $theme == 'dark' 在编译期切整套颜色，会导致深色/浅色两套 CSS 都被打包进去，体积翻倍，且无法响应系统偏好变化。
真正轻量的主题切换，依赖的是 CSS 变量 + @media (prefers-color-scheme: dark) 或 [data-theme="dark"]，预处理器只管提供初始值和结构，不参与运行时决策。
最易被忽略的一点：预处理器变量名和 CSS 变量名必须严格对齐。比如 Sass 里叫 $surface-bg，CSS 里就得是 --surface-bg，拼错一个字母，var(--surface-bg) 就静默失效，控制台不报错，排查起来像幽灵 bug。
