用 $theme-map 按模块（如 color、spacing）分组存储主题变量，配合 map-get() 或封装 theme() 函数安全取值，支持嵌套路径与兜底逻辑；导出 json 时需类型校验与格式转换，确保前后端 key 对齐。
怎么用 $theme-map 存一组主题变量，而不是堆一堆独立变量
直接上手就是定义一个 map，比如颜色、间距、圆角这些按模块分组存进去，比散着写 $primary-color、$spacing-sm、$radius-md 更易维护。Sass 的 map-get() 是取值核心，别硬记路径，用嵌套 map + 多级 key 就行。
常见错误是把 map 当普通变量用，比如 color: $theme-map[primary]; —— 这会报错，必须走 map-get($theme-map, primary)。
-
$theme-map里建议用统一结构：(color: (primary: #007bff, text: #333), spacing: (sm: 4px, md: 8px)) - 取值时嵌套调用：
map-get(map-get($theme-map, color), primary) - 避免在循环外反复写多层
map-get，可封装成theme()函数简化调用
为什么 theme() 函数比裸写 map-get 更可靠
裸写 map-get 容易漏掉某一层、拼错 key、或者没处理 key 不存在的情况，编译时报错但不提示具体哪一层断了。自定义 theme() 可以加兜底逻辑和类型检查。
典型场景是组件库需要适配暗色/亮色主题，靠函数统一入口，后续换主题只需改 map 数据，不用动样式代码。
- 函数内部用
@if map-has-key($map, $key)判断是否存在，避免编译失败 - 支持点号路径语法（如
theme("color.primary")），内部用str-split()解析，比手动嵌套map-get更直观 - 返回值默认 fallback 到
map-get($map, default)或null，防止样式意外丢失
map-deep-get() 和原生 map-get() 在嵌套取值时差在哪
原生 map-get() 只能取一级，两层就得嵌套两次；map-deep-get() 是社区常用封装（非 Sass 内置），接受 key 列表或字符串路径，自动递归下钻。
容易踩的坑是误以为 Sass 本身支持 map-get($map, "color.primary") —— 实际不支持，必须自己实现或引入 mixin。
- 推荐用列表形式传参：
map-deep-get($theme-map, color, primary)，语义清晰且无字符串解析风险 - 如果用字符串路径（如
"color.primary"），注意转义点号和空格，str-split()在 IE 兼容模式下可能出问题 - 性能上差异微乎其微，但深度超过 4 层时，递归函数要防栈溢出，建议限制最大嵌套层级为 5
导出 map 到 JS 时，json-export mixin 为什么经常生成无效 JSON
不是所有 Sass 值都能直出 JSON：px 单位、rgba() 颜色、甚至未 quote 的字符串都会导致 JSON 解析失败。直接 @content 拼接或用 inspect() 输出是常见错误源头。
真实需求往往是让 JS 读取主题配置做 runtime 切换，所以输出必须是标准 JSON，且 key 名要和 CSS 中一致，否则前后端对不上。
- 只允许导出数字、字符串（带引号）、布尔、null 和嵌套 map/array，其他一律先
meta.type-of()校验 - 颜色必须转成十六进制或 rgb() 字符串，
rgba(0, 123, 255, 0.8)得先转成"rgba(0, 123, 255, 0.8)" - 路径中含
/或.的 key（如breakpoint.xs）在 JSON 里没问题，但 JS 侧读取时得用方括号语法，这点常被忽略
JSON.parse() 吃下去。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
