应使用 Sass map 和函数管理主题，集中定义带 !default 的变量，通过 @use/@forward 避免污染，并仅在 :root 或 [data-theme] 下输出 CSS 变量供 var() 引用。
直接用 $primary-color: #007bff 这种写法管理主题，短期省事，长期必崩——它既无法运行时切换，又容易在多主题场景下失控。真正提升效率的方式，是让 Sass 变量只做一件事：在编译阶段生成、映射和校验主题配置，其余全部交给 CSS 变量。
如何正确定义主题变量并避免覆盖失效
Sass 变量一旦声明就不可被后续同名赋值覆盖（除非用 !default）。常见错误是多次 @import 同一变量文件，或在组件里重写 $primary-color，结果值根本没变。
- 所有主题变量必须集中定义在单个文件中，如
_theme.scss，且仅出现一次 - 基础值一律加
!default：$primary-color: #007bff !default;，允许构建层提前注入 - 禁用
@import，统一用@use "theme" as t+@forward暴露，防止作用域污染 - 不要在组件文件里
@use "theme"后再改$primary-color——你改的只是本地副本
为什么必须用 map + function 管理多主题
硬编码 $primary-light、$primary-dark、$primary-green 会导致变量数量指数级增长，维护成本爆炸。Sass 的 map 和自定义函数才是多主题的正确抽象方式。
- 定义主题 map：
$themes: ("light": ("primary": #007bff, "bg": #fff), "dark": ("primary": #2d3748, "bg": #1a202c)); - 写取值函数：
@function theme($theme-name, $key) { @return map-get(map-get($themes, $theme-name), $key); } - 调用时明确语义：
color: theme("dark", "primary");，而非模糊的$primary-color - 这样既支持编译期静态检查，又为后续对接 CSS 变量（如
--primary-color）留出命名映射空间
如何让 Sass 安全输出 CSS 变量而不破坏运行时能力
别写 --primary-color: #{$primary-color}; 就完事。这种硬编码把变量“钉死”在编译结果里，断掉了 JS 切换、prefers-color-scheme fallback 或用户动态调节的可能。
立即学习“前端免费学习笔记（深入）”；
- 只在
:root或[data-theme="xxx"]下批量生成初始值：:root[data-theme="dark"] { --primary-color: #{theme("dark", "primary")}; } - 所有组件样式必须用
var(--primary-color)引用，禁止在 Sass 中直接插值到属性值里 - 如果需要运行时计算（如亮度调节），提前在 Sass 中写好
color-mix()或hsl()表达式，把中间变量（如--bg-lightness）留给 JS 控制 - 确保
var(--x)中的x和$themesmap 的键名完全一致（大小写、连字符都不能错）
最常被忽略的不是语法，而是边界意识：Sass 不该试图模拟运行时行为，CSS 变量也不该承担编译期逻辑。变量名对齐、职责隔离、输出位置可控——这三处出错，主题系统就只剩表面切换，内里全是补丁。
