Sass变量无法运行时换肤，因其在编译阶段即被替换为固定值，不进入浏览器运行时环境；CSS自定义属性（--xxx）则保留在运行时，可由JS通过setProperty()动态修改并实时重绘。
为什么不能直接用 Sass 变量做运行时换肤
Sass 变量（如 $primary-color: #007bff）在编译阶段就被替换成具体值，最终 CSS 文件里根本不存在变量引用。换肤时改不了——浏览器压根看不到它。CSS 自定义属性（--primary-color）则不同，它保留在运行时，JS 可随时通过 element.style.setProperty() 或 document.documentElement.style.setProperty() 动态修改，样式引擎会实时重绘。
关键区别在于生命周期：Sass 变量属于构建时（build-time），自定义属性属于运行时（runtime）。想换肤，必须把“可变部分”留在 CSS 里，而不是让 Sass 把它吃掉。
如何用 Sass 管理自定义属性声明但不破坏运行时能力
用 Sass 的 @each 和 map 生成 :root 中的 --xxx 声明，既保持代码组织性，又不提前求值。Sass 只负责拼字符串，不介入值计算。
- 定义主题映射：
$theme-map: ("primary": #007bff, "success": #28a745, "bg": #f8f9fa); - 批量输出 CSS 自定义属性：
@each $name, $value in $theme-map { --#{$name}: #{$value}; } - 避免写死单位或函数调用（如
darken($value, 10%)），否则 Sass 会立即计算并丢失运行时灵活性 - 若需衍生色（如
--primary-light），应在 JS 或单独 CSS 规则中用color-mix()/hwb()实现，而非 Sass 函数
如何在 Sass 中安全引用自定义属性（避免回退失效）
不能写 color: var(--primary); 就完事——万一自定义属性未定义，又没设回退值，样式就挂了。Sass 本身不校验 var()，得靠写法兜底。
立即学习“前端免费学习笔记（深入）”；
- 始终带回退值：
color: var(--primary, #007bff);，注意回退值应与默认主题一致 - 别在 Sass 函数里包裹
var()，例如lighten(var(--primary), 10%)是非法的，CSS 不支持对var()结果再运算（除非用color-mix()等新函数） - 需要响应式主题切换时，把不同主题的
--xxx声明放在不同 class 下（如.theme-dark :root），再用 JS 切换 class，比反复 setProperty 更稳定
常见错误：把 Sass map 直接转成内联 style
有人试图用 @each 遍历 map 并给 :root 写 style="..."，这是错的——内联 style 无法被 CSS 选择器继承，且会覆盖外部 :root 声明，导致 JS 修改失效。
- 正确做法：所有自定义属性必须声明在
:root或带 class 的祖先选择器中（如.theme-dark） - 禁止在 HTML 标签上用
style="--primary: red"做主题，这会让后代元素取不到该变量（作用域限制） - 调试技巧：在 DevTools 的 Elements 面板里检查
:root计算后的Computed值，确认--primary是否生效；若显示invalid value，大概率是语法拼错或漏了冒号
真正难的不是写几行 var()，而是守住“变量不出现在编译后 CSS 值里”这条线——任何让 Sass 对颜色、尺寸做算术或函数调用的地方，都在悄悄破坏运行时换肤的根基。
