sass map 存颜色值应定义扁平化主题映射（如 $colors: ("primary": #007bff, "surface": #ffffff)），用 @each 生成 css 自定义属性，配合 data-theme 切换预设变量块，避免运行时计算与冗余变量。
怎么用 Sass Map 存颜色值，而不是一堆零散变量
直接把主题色塞进 $colors 这种 Map 里，比写二十个 $primary-color、$secondary-bg 更易维护。Map 是键值对，天然适合“主题名 → 颜色值”这种映射关系。
常见错误是把 Map 当成普通变量用，比如 color: map-get($colors, primary) 写在顶层——Sass 会报错，因为 map-get 必须在支持作用域的上下文中执行（比如 mixin 或函数里）。
- 主题 Map 建议定义在全局变量文件中，结构扁平：
$colors: ( "primary": #007bff, "surface": #ffffff, "error": #dc3545 );
- 别嵌套太深，Sass 的
map-deep-get不是原生函数，要自己写或引入sass:map扩展，多数场景扁平够用 - 键名统一用小写加短横线（
"text-muted"），避免空格或大写导致引用时出错
如何动态生成 CSS 自定义属性（CSS Variables）
只存 Sass Map 没用，得把它吐成浏览器能读的 :root 变量，否则换主题时还得重编译 CSS。关键在用 @each 遍历 Map 并拼出 --color-primary 这类变量。
容易踩的坑：变量名带点号（如 primary.text）会被当成 CSS 类名解析；还有人漏掉 !default，导致多次 import 时覆盖失败。
- 生成逻辑必须包在 mixin 里（比如
@mixin define-theme-vars($theme-map)），不然无法复用 - 拼接 CSS 变量名时用
--color-#{<code>$key}，确保 key 是字符串（Map 键默认就是字符串） - 给
:root加data-theme="dark"这类属性，方便 JS 切换后精准更新对应变量块
JS 切换主题时，怎么避免全量重绘或 FOUC
单纯改 document.documentElement.setAttribute('data-theme', 'dark') 不够——如果 CSS 变量没提前定义好，或者 JS 在 CSS 加载完前执行，就会闪一下白屏（FOUC）或样式错乱。
根本原因是 CSS 变量作用域是级联的，但 Sass 编译后变量已固化，JS 只能靠切换预设好的整套变量块生效。
- 所有主题的 CSS 变量必须在首屏 CSS 中一次性定义好（哪怕初始只用 light），不能按需加载 CSS 文件
- JS 切换时只改
data-theme属性，不要动态插入<style></style>标签，后者触发重排且难管理 - 检查浏览器是否支持
CSS.supports('color', 'var(--x)')，不支持就 fallback 到 class 切换（如theme-dark）
Sass Map 主题和 CSS 自定义属性的性能边界在哪
Map 本身不参与运行时，纯编译期结构，所以存几百个颜色也不会拖慢构建。真正影响性能的是生成的 CSS 变量数量和层级深度。
一个典型问题是：为每个组件状态（hover / disabled / active）都建独立变量，结果产出上千行 :root 定义，不仅体积涨，DevTools 里调试也卡。
- 只暴露语义化变量（
--color-primary,--color-border），不暴露具体用途变量（--btn-primary-bg） - 组件内通过
color: var(--color-primary)+opacity: 0.6实现禁用态，而不是预设--color-primary-disabled - 深色模式切换若涉及大量 contrast 计算，别用 Sass 函数做实时计算（如
lighten($base, 10%)），而应预先存好两套 Map，靠 data-theme 切换
最麻烦的其实是设计系统里“同名不同值”的情况，比如 surface 在浅色下是白色，在深色下是 #121212，但某些卡片又要求 surface-alt 浅色是 #f8f9fa、深色是 #1e1e1e——这时候 Map 的键命名和分层就得想清楚，不然后期改一处，八处崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
