Sass本身不支持运行时动态换主题，本质是编译期预生成所有主题CSS并靠data-theme属性匹配；主题map必须扁平、键名统一，JS仅切换属性并持久化。
Sass 本身不生成运行时可切换的主题，它只是在编译阶段把所有主题样式“一次性写死”进最终 CSS 文件里。你看到的“切换”，其实是 JS 改 data-theme 属性后，浏览器匹配预编译好的 [data-theme="dark"] .button 这类高优先级规则——主题能力来自结构设计，不是 Sass 的魔法。
主题变量必须扁平化定义，别嵌套 map
如果你写成 colors: (primary: (base: #409eff, hover: #307bff))，map-get() 就没法一层取到 primary 对应的颜色值。Sass 不支持链式取值，也不推荐用多层嵌套增加维护成本。
- 正确做法：所有主题键名拉平，比如
color-primary-base、color-primary-hover、bg-surface - 确保每个主题 map 的键完全一致，否则
themed('color-primary-base')在 dark 主题里可能查不到 - 避免用中文或空格命名键，只用 ASCII 字母、数字、短横线
@mixin themeify 必须带 !global 和属性选择器嵌套
这是整个方案最易出错的一环。$theme-map 如果没用 !global 提升作用域，@function themed() 就永远读不到当前遍历的主题数据，返回 null 或直接报错 "$theme-map is not a map"。
- 必须写
$theme-map: $theme-map !global，不能只写!global在变量声明外 - 必须用
[data-theme="#{$theme-name}"] &，其中&是关键——它让子样式自动继承父选择器，生成如[data-theme="dark"] .btn而非孤立的.btn - 别用
body[data-theme]包裹，这会让所有组件样式强依赖 body，破坏局部复用性
JS 切换 data-theme 后必须持久化，且要设默认值兜底
用户刷新页面后主题丢失，往往是因为 JS 没读取 localStorage，也没给 <html> 设置初始 data-theme。更隐蔽的问题是：如果某条 CSS 规则漏写了 [data-theme="xxx"] 前缀，它就会在所有主题下生效，覆盖掉主题色。
立即学习“前端免费学习笔记（深入）”；
- JS 初始化时先读
localStorage.getItem('theme')，再设置document.documentElement.setAttribute('data-theme', value) - 务必在
:root中为每个 CSS 变量设默认值，例如--color-primary: #409eff，防止新主题未覆盖时样式崩塌 - 不要依赖 Sass 编译时的
@if做运行时分支——它早被展开成静态 CSS 了
真正难的不是写对 themeify，而是保证所有主题 map 键名对齐、所有组件都走同一套 themed() 调用路径、所有颜色/间距/阴影都从 map 里取——漏掉一个，主题就出现“局部失联”。
