用 Sass Map 定义颜色系统应将语义化色名（如 primary、warning）作为键，十六进制值为值存入 $colors；支持嵌套主题 Map，通过 map-get 分层取值；相比变量拼接，map-get 类型安全、可校验、IDE 可跳转，且键不存在时返回 null 而非报错。
怎么用 Sass Map 定义一套可维护的颜色系统
直接把颜色收进 $colors 这个 Map 里，比零散写一堆 $primary-color、$success-color 更易扩展和查改。Map 是键值对结构，天然适合表达“色名 → 十六进制/RGB”的映射关系。
常见错误是把颜色值硬编码在组件里，比如按钮直接写 background: #007bff；一旦主题换色或加暗色模式，就得全局搜改，漏一个就错一片。
- 用
map-get($colors, primary)统一取值，所有地方只认这个入口 - 键名用语义化名称（
primary、warning、surface），别用blue-500这类描述性命名——它暗示了具体色值，反而限制了后期调整自由度 - 支持嵌套 Map：比如
light和dark主题各自一个子 Map，用map-get(map-get($themes, light), primary)分层取值
为什么 map-get 比变量拼接更安全
有人图省事写 $color-#{$name} 动态拼变量名，Sass 不支持这种运行时变量解析，编译直接报错：Undefined variable。而 map-get 是 Sass 内置函数，类型安全、IDE 可跳转、编译期就能校验键是否存在。
使用场景集中在需要根据状态动态选色的地方，比如表格行悬停、表单验证提示、图表配色等。
-
map-get($colors, $state)中的$state可以是传入的参数，也可以是循环生成的列表项，灵活性远超变量拼接 - 如果键不存在，
map-get默认返回null，不会崩溃；你还可以用map-has-key($colors, $state)先判断再取值 - 注意：Map 的键不支持变量插值，
map-get($colors, #{$dynamic-key})在旧版 Sass（
如何让颜色 Map 支持 CSS 自定义属性（CSS Variables）输出
纯 Sass 变量只能在编译时用，没法 runtime 切主题。想支持 JS 动态切换主题，得把颜色 Map 同步导出为 CSS 自定义属性。
关键不是“能不能”，而是“怎么导出才不冗余、不污染全局、还能被 JS 安全读取”。
- 用
@each $name, $value in $colors遍历 Map，生成--color-#{$name}: #{$value} - 避免直接输出到
:root—— 万一多个主题共存，会覆盖；改用带命名空间的 selector，比如.theme-light下批量设置 - 十六进制值要确保是合法 CSS 颜色格式；如果 Map 里存的是 Sass 颜色对象（如
blue），需用inspect($value)转成字符串，否则输出blue字面量而非#007bff
容易被忽略的兼容性和维护陷阱
Map 看似简单，但真正在中大型项目里长期维护，几个细节不处理好，半年后就会变成“谁都不敢动”的技术债。
- 不要在 Map 里混用单位或函数调用，比如
primary: darken(#007bff, 10%)—— 这会让导出 CSS 变量变得不可控，darken()是 Sass 函数，无法转成纯 CSS 值 - 颜色 Map 最好单独抽成
_colors.scss文件，且禁止在其中@import其他逻辑文件，防止循环依赖 - 团队协作时，必须约定键名规范文档（比如是否允许
link-hover这种状态类键），否则 Map 会迅速膨胀成无序词典
真正难的从来不是写几行 map-get，而是让所有人遵守同一套键命名逻辑，并确保它能同时喂饱 Sass 编译器和浏览器运行时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
