sass变量不可覆盖，需用!default声明并确保在所有使用前仅定义一次；推荐用map+function管理多主题，统一通过@use和@forward暴露配置，避免混用css变量与sass函数计算。
为什么直接在 $primary-color 上覆盖不生效
Sass 变量一旦被声明（!default 除外），后续同名赋值会被忽略——不是“覆盖”，而是“跳过”。你写两遍 $primary-color: red;，第二句根本不会改变值。
常见错误现象：:root 里写了 CSS 变量，Sass 文件里也定义了 $primary-color，但编译后样式没变；或者用 @import 多次引入主题文件，以为后导入的会覆盖前一个。
- 必须在所有使用该变量的文件 之前 定义主题变量，且只定义一次
- 推荐用
!default声明基础值：$primary-color: #007bff !default;，这样允许外部提前注入 - 避免在组件文件里直接改
$primary-color，应通过函数或 map 动态取值
用 map + function 实现多主题颜色映射
硬编码多个变量（$primary-light、$primary-dark）会爆炸式增长。用 map 存主题，function 查值，更易维护也支持运行时切换逻辑（比如配合 CSS 变量回退）。
使用场景：需要同时支持 light/dark/theme-blue/theme-green 四套配色，且按钮、卡片、文字等组件共用同一套语义化命名（如 text-primary、bg-surface）。
立即学习“前端免费学习笔记（深入）”；
- 定义主题 map：
$themes: ("light": ("primary": #007bff, "surface": #fff), "dark": ("primary": #4dabf7, "surface": #1a1d22)); - 写取值函数：
@function theme-color($theme-name, $key) { @return map-get(map-get($themes, $theme-name), $key); } - 调用：
color: theme-color("dark", "primary");
@use 和 @import 混用导致主题变量丢失
@use 是模块化语法，每个 @use 都创建独立作用域。如果你在 A.scss 里 @use "theme" 定义了 $primary-color，但在 B.scss 里 @use "theme" 后又想改它——改不动，因为这是两个隔离的副本。
性能影响：多次 @use 同一模块不会重复编译，但变量不会跨模块共享；而 @import 是文本拼接，变量可穿透，但已废弃且无法 tree-shake。
- 统一用
@use，把主题变量集中放在一个入口文件（如_config.scss），并@forward出去 - 不要在组件文件里
@use "theme"后再$primary-color: ...—— 改的是本地副本 - 如需动态主题，把主题选择逻辑提到构建层（如 PostCSS 插件注入变量），Sass 层只负责消费
CSS 变量回退和 Sass 编译时颜色不一致
很多人想“一套 Sass 写法，同时输出静态 CSS 和支持 JS 切换的 CSS 变量”，结果发现：color: var(--primary, #007bff); 在暗色模式下没生效，或者 Sass 编译出的颜色和 JS 设置的 style.setProperty('--primary', ...) 对不上。
根本原因：Sass 在编译期求值，CSS 变量在运行时求值，二者生命周期不同。不能指望 lighten($primary-color, 10%) 和 color-mix(in srgb, var(--primary), white 10%) 结果一致。
- 静态样式用 Sass 函数生成（如
lighten()、mix()）；动态部分交给 CSScolor-mix或 JS 计算 - 避免混用：不要在同一个属性里既用 Sass 计算又依赖 CSS 变量（如
background: rgba(var(--primary-rgb), 0.1);要确保--primary-rgb已按r, g, b格式注入） - 调试技巧：编译后检查 CSS 是否含硬编码值；打开 DevTools 看 computed style 里最终取的是变量还是 fallback
主题切换真正难的不是写几个变量，而是划清编译期和运行时的边界——变量在哪定义、谁负责计算、fallback 怎么兜底，这三处错一个，颜色就对不上。
