直接结论：用 $themes map 存多套配色，@each 遍历生成对应选择器规则，再靠 html 的 data-theme 属性触发切换——不是 js 改变量，也不是动态加载 css 文件，而是编译期批量产出可切换的样式块。
直接结论：用 $themes Map 存多套配色，@each 遍历生成对应选择器规则，再靠 HTML 的 data-theme 属性触发切换 —— 不是 JS 改变量，也不是动态加载 CSS 文件，而是编译期批量产出可切换的样式块。
为什么不能只靠 $primary 这类单变量？
单一变量撑不起真实主题需求。按钮悬停要加深、禁用要灰掉、背景和文字得成对反差、图标还要区分亮/暗版本。硬编码每个状态颜色会导致：
- 维护成本爆炸：改一个主题色，得手动翻遍所有
mix($primary, black, 20%)和lighten($primary, 15%) - 语义断裂：组件里写
color: $primary-light，但没人知道这个“light”是相对于哪个 base 计算出来的 - 无法跨主题复用逻辑：深色主题下
$primary-light可能反而比亮色主题的$primary还暗
Map 把“一套主题”封装成独立数据单元，每个 key 是语义化角色（bg、text、icon-home），值是具体颜色或资源路径，彼此解耦。
$themes Map 的定义与键名陷阱
必须用字符串字面量作 key，否则 Sass 编译报错 Undefined variable "light"：
$themes: (
"light": ( // ✅ 必须加引号
bg: #ffffff,
text: #1f2937,
icon-home: url('~@/assets/img/light-home.svg')
),
"dark": ( // ✅ 同样必须加引号
bg: #111827,
text: #f9fafb,
icon-home: url('~@/assets/img/dark-home.svg')
)
);
常见错误：
- 写成
light:（不带引号）→ 编译失败 - 用变量当 key：
$theme-key: "light"; #{$theme-key}: (...)→ 不合法，Sass 不允许动态 key - 在
map-get()第二个参数传变量：$key: "bg"; map-get($theme-map, $key)→ 编译失败，必须是字面量如bg
@each 批量输出主题选择器时的插值与作用域
目标是生成 [data-theme="light"] .btn 和 [data-theme="dark"] .btn 这类规则，关键在两点：
- 选择器插值必须用
#{$theme-name}，不能漏{}包裹，否则输出的是字面量$theme-name - 内部要用
map-get($theme-map, bg)直接取值，不能提前把$theme-map赋给新变量再取 —— Sass 作用域限制，局部变量进不了@each循环体
正确写法：
@each $theme-name, $theme-map in $themes {
[data-theme="#{$theme-name}"] {
--bg: #{map-get($theme-map, bg)}; // 导出 CSS 变量需插值包裹
background-color: map-get($theme-map, bg);
color: map-get($theme-map, text);
.btn {
background-color: map-get($theme-map, bg);
color: map-get($theme-map, text);
}
}
}
图片、渐变等非颜色值也能放进 Map
Map 不限于颜色，SVG 路径、linear-gradient、字体名、甚至 display: none 都能存：
$themes: (
"light": (
banner-bg: url('~@/assets/bg-light.jpg'),
search-btn: linear-gradient(135deg, #4f46e5, #7c3aed),
font-family: 'Inter', sans-serif
),
"dark": (
banner-bg: url('~@/assets/bg-dark.jpg'),
search-btn: linear-gradient(135deg, #374151, #1f2937),
font-family: 'Inter', system-ui
)
);
注意：
- URL 路径里的
~@/别漏，否则 Webpack 找不到资源 - 渐变值不要加引号，否则变成字符串字面量，CSS 解析失败
- 字体栈末尾保留通用族（
sans-serif），防 fallback 失败
真正容易被忽略的是：Map 主题方案一旦编译进 CSS，就固化为静态规则。它不感知运行时变化，也不依赖 JS 加载 —— 换肤快，是因为浏览器原生匹配 [data-theme] 属性，不是靠 JS 拼字符串或重写 style 标签。所以别在 Map 里塞 rgba($primary, 0.8) 这类表达式，该算的地方在选择器里算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
