真正能落地的主题系统必须让Sass变量管配置、CSS变量管运行时取值：Sass变量仅用于编译阶段的颜色计算和主题映射，CSS变量仅通过var()在样式中引用，且键名须与主题map完全一致。
直接把 Sass 变量和 CSS 变量混着用，不加约束，最后会变成两套变量系统各自为政：Sass 编译时算一套，运行时 JS 改另一套，改来改去颜色对不上、主题切不动、调试全靠猜。真正能落地的主题系统，必须让两者各司其职、边界清晰。
用 Sass 管配置，用 CSS 变量管运行时取值
Sass 变量（$primary）只该出现在配置层和编译阶段，比如定义主题色映射、做颜色函数计算（lighten($primary, 10%)）；CSS 变量（--primary-color）只该出现在 :root 或组件作用域里，且所有样式规则必须通过 var(--primary-color) 引用——不能在 Sass 中直接用 $primary 写进组件样式里。
- 错误写法：
.btn { background: $primary; }→ 编译后固定死，无法运行时切换 - 正确写法：
.btn { background: var(--primary-color); }→ 运行时由 JS 或data-theme控制 - 配置层示例：
$themes: (dark: (primary: #79bbff));，再用@each批量生成:root[data-theme="dark"] { --primary-color: #{map-get(...)}
避免在 Sass 中直接赋值 CSS 变量
别写 --primary-color: #{$primary}; 就完事——这看似省事，实则断掉了主题切换的灵活性。一旦你想在深色模式下让 --primary-color 根据 prefers-color-scheme 动态 fallback，或者用 JS 覆盖某个变量，这种硬编码就失效了。
- 必须保留 CSS 变量的“可变性”：它得是字符串
var(--x)，不是编译后的具体值 - 若需 Sass 计算后再注入，用
#{map-get($theme-map, primary)}生成初始值，但后续一切样式都走var() - 警惕
$primary: var(--primary-color)这类反向赋值——Sass 无法解析运行时变量，编译会报Invalid CSS
主题切换时 JS 和 Sass 的协作边界
JS 不该手动 setProperty 每个变量，也不该依赖 Sass 生成多套 CSS 文件。真正的协作点只有一个：控制 data-theme 属性或 class，并确保对应主题的 CSS 变量已由 Sass 预置好。
立即学习“前端免费学习笔记（深入）”；
- JS 只做两件事：读取
localStorage或prefers-color-scheme，然后设置document.documentElement.dataset.theme = "dark" - Sass 负责把
$themesmap 编译成完整的:root[data-theme="dark"] { --bg: #1a1a1a; ... } - 如果 JS 需动态改单个变量（比如用户调亮度），只能改
--bg-lightness这类中间变量，再让其他变量用color-mix(in srgb, white, var(--bg) calc(var(--bg-lightness) * 1%))计算——但这类逻辑必须提前在 Sass 里写好，不能 runtime 临时拼
最常被忽略的一点：所有组件样式里出现的 var(--x)，其 key 名必须和 $themes map 的键名完全一致，且大小写、连字符都不能错——map-get($theme, text-color) 和 var(--text_color) 是两回事，漏一个下划线就白忙活半天。
