用 sass map 统一管理多套主题色，通过 theme-color() 函数按需取值，配合组件 mixin 的 $theme 参数实现主题作用域，避免重复 css 和运行时冲突。
怎么用 Sass Map 存多套主题色而不写重复 CSS
靠手写 $light-theme 和 $dark-theme 两套变量，再分别 @each 生成规则，很容易漏掉某个组件、某条边框色。真正省事的做法是把主题抽象成「键值对集合」，用 map 统一管理，再配一个 theme-color() 工具函数按需取值。
- 所有颜色必须收在顶层
$themesmap 里，结构形如：(light: (bg: #fff, text: #333), dark: (bg: #1a1a1a, text: #eee)) - 不要在
@each循环里直接输出 CSS；改用@function theme-color($theme, $key)封装取值逻辑，避免硬编码路径 - 如果主题要支持运行时切换（比如加
data-theme="dark"），就得配合:root变量注入——Sass Map 本身不参与运行时，它只负责编译期生成初始 CSS
为什么不能直接用 CSS 自定义属性替代 Sass Map
可以，但得看场景。纯 CSS 变量适合主题在 JS 控制下动态切换，而 Sass Map 更适合构建时确定主题、输出精简 CSS（比如只打包 light + dark，不带未用的 high-contrast）。
- 用
map-get(map-get($themes, $theme), $key)编译后是静态值（如#1a1a1a），无运行时开销 - 用
var(--bg)必须靠 JS 设置document.documentElement.style.setProperty()，且所有主题色都要提前声明在:root，哪怕当前没用到 - 混合使用有风险：比如 Sass 里写
color: theme-color(light, text)，又在 JS 里改--text，两者会冲突
如何让组件自动适配当前主题色（不用每处都写 theme-color()）
靠「主题作用域」+ 「默认参数」。给每个组件 mixin 加一个 $theme: default 参数，内部统一调用 theme-color($theme, ...)，调用时只传一次主题名。
- 定义
@mixin button($theme: default) { background: theme-color($theme, bg); color: theme-color($theme, text); } - 在 light 主题区块里写
.btn-light { @include button(light); }，dark 区块里写.btn-dark { @include button(dark); } - 别在组件内部硬写
theme-color(default, ...)——default是占位符，实际必须显式传入主题名，否则编译报错或取错值
编译后 CSS 体积暴增？检查这三处
多主题不等于多倍 CSS。暴增通常是因为 map 层级太深、@each 嵌套失控，或误把整套主题全量输出。
- 禁止在
@each $theme, $colors in $themes外层再套一层@each $name, $value in $colors输出所有组合——只在真正需要的地方按需取值 - 删掉调试用的
@debug map-keys($themes)，它不会影响 CSS，但会让编译慢 - 确认构建工具（如 Webpack 的 sass-loader）没开启
sourceMap或outputStyle: 'expanded'，这两项会让 CSS 膨胀明显
主题切换不是换套 class 名就完事，关键在颜色映射关系是否可维护、是否和运行时逻辑解耦。Sass Map 是编译期工具，别指望它响应 prefers-color-scheme ——那得靠媒体查询或 JS 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
