scss主题管理必须使用统一结构的map而非独立变量，所有品牌需遵循相同key名并配合@each生成[data-brand]选择器，css变量才是运行时切换载体，组件应统一使用var(--text-color)而非编译期map-get。
SCSS map 必须统一主题结构，不能用独立变量硬编码
主题一多就失控，根本原因是把每个品牌色写成独立变量，比如 $primary-brand-a、$primary-brand-b。新增一个品牌就得手动改十几处 mixin 和样式规则，漏一处就错色。真正可维护的做法是把每个品牌当作一个“数据对象”存进 map：$themes，所有品牌必须使用完全一致的 key 名（如 primary、bg、text），否则 map-get($theme-map, primary) 在 JS 读取或 SCSS 计算时会返回 null。
示例正确结构：
$themes: (
brand-a: (
primary: #4285f4,
bg: #ffffff,
text: #1e293b
),
brand-b: (
primary: #00a878,
bg: #f8fafc,
text: #0f172a
),
brand-c: (
primary: #e63946,
bg: #fffaf0,
text: #2b2d42
)
);
@each 必须配合 [data-brand] 生成选择器块，别手写
手写 [data-brand="brand-b"] .header { background-color: #00a878; } 这类规则，3 个品牌还能忍，5 个以上必然漏或拼错。唯一靠谱方式是用 @each 遍历 $themes，并绑定 [data-brand] 属性作为运行时锚点：
-
&保留父选择器上下文，适合在 mixin 内复用 -
[data-brand]是切换触发点，不是装饰——JS 必须通过document.documentElement.setAttribute('data-brand', 'brand-b')触发，而非操作 class 或 style - 不建议用
:root[data-brand]直接覆盖 CSS 变量，它会破坏组件内联样式优先级，导致color: var(--text-color) !important失效
典型 mixin 写法：
@mixin brand-bg {
@each $brand, $map in $themes {
[data-brand="#{$brand}"] & {
background-color: map-get($map, bg);
}
}
}
CSS 变量才是运行时切换的载体，SCSS 变量只负责编译期映射
$primary 这类 SCSS 变量打包后就固化成死值，JS 改不了；真正能动态换色的是 CSS 自定义属性。必须用 SCSS 编译出初始 --primary-color 值，并为每个品牌生成对应覆盖规则：
:root {
--primary-color: #{map-get($themes, brand-a, primary)};
--bg-color: #{map-get($themes, brand-a, bg)};
--text-color: #{map-get($themes, brand-a, text)};
}
@each $brand, $map in $themes {
[data-brand="#{$brand}"] {
--primary-color: #{map-get($map, primary)};
--bg-color: #{map-get($map, bg)};
--text-color: #{map-get($map, text)};
}
}
组件中统一用 color: var(--text-color)，而不是 color: map-get($theme-map, text) —— 后者只在编译期生效，无法响应运行时切换。
mixins 中 theme-value 函数必须确保作用域正确
常见错误是直接在 @each 循环里调用 map-get($theme-map, key)，但 $theme-map 在循环体外未定义。必须用 !global 提升作用域，或封装为函数：
- 错误写法：
color: map-get($theme-map, text)——$theme-map未声明 - 正确写法：在
@each内部先赋值$theme-map: $map !global;，再调用map-get($theme-map, text) - 更安全做法：封装
@function theme-value($key) { @return map-get($theme-map, $key); }，并在每次@each开始前重置$theme-map
注意：不要在全局 scope 定义 $theme-map，否则多个 @each 并行时会相互污染。
最易被忽略的点是：CSS 变量默认值必须设在 :root，否则首次渲染时 var(--primary-color) 会 fallback 到 inherit 或 transparent；而 JS 切换 data-brand 后，若没配 localStorage 持久化，刷新页面就会回退到默认品牌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
