正确写法是封装 deep-map-get() 函数逐层安全读取嵌套主题 map，需预检 key 存在性、统一层级语义、缓存高频值，并校验返回类型避免崩溃。
map-get 读取嵌套主题 map 的正确写法
直接用 map-get($themes, $theme-name) 只能拿到顶层主题对象，没法一步取到 color-primary 这类深层值。Sass 没有原生支持多级路径的 map-get，必须手动逐层解构。
常见错误是写成 map-get(map-get($themes, $theme-name), color-primary) —— 看似合理，但一旦某层 key 不存在，Sass 会直接报错 "Error: No value found for key"，而不是返回 null。
- 安全做法：用
map-has-key()预检每一层，再调用map-get() - 更实用的是封装一个
deep-map-get()函数，接收 map 和类似(colors, primary)的键路径列表 - 注意：键名必须是 unquoted（如
primary），不能写成 quoted 字符串"primary"，否则map-get匹配失败
主题 map 的结构设计要适配动态读取
扁平结构（如 $theme-dark-color-primary）看似简单，但无法复用逻辑；嵌套结构更灵活，但得提前约定层级语义。推荐用两级：主题名 → 类别 → 具体属性。
$themes: (
light: (
colors: (
primary: #007bff,
background: #ffffff,
),
spacing: ( xs: 4px, sm: 8px ),
),
dark: (
colors: (
primary: #0056b3,
background: #121212,
),
spacing: ( xs: 4px, sm: 8px ),
),
);
- 类别键（如
colors、spacing）必须统一，避免出现color和colors混用 - 所有主题必须包含相同层级的 key，缺失项显式设为
null，比如border: null，否则map-has-key判断会出错 - 不要用变量插值构造 key 名，如
#{\$category}-#{$prop}，这会导致 map 查找失效
在 @each 或 mixin 中安全调用 deep-map-get
想批量生成不同主题的 CSS 规则时，@each $theme-name, $theme-map in $themes 是标准写法，但里面调用 deep-map-get 容易忽略返回值类型——它可能返回颜色、字符串、数字甚至 null，而 color 函数或 px 单位操作对 null 会直接崩溃。
立即学习“前端免费学习笔记（深入）”；
- 务必用
@if $val != null做兜底判断，再决定是否输出该声明 - 避免在
@include里直接展开未校验的deep-map-get结果，例如background: deep-map-get($themes, $theme, colors, background)必须包在@if内 - 如果主题配置含 CSS 变量（如
--color-primary），建议把变量名也存进 map，而不是拼接字符串，防止命名不一致
编译性能和调试陷阱
每次调用 deep-map-get 都是 O(n) 遍历，嵌套越深、主题越多，编译越慢。10 个主题 + 4 层嵌套，单次调用实际执行约 40 次 map-get。
- 高频使用的值（如
color-primary）建议在 mixin 开头缓存：$primary: deep-map-get($themes, $theme, colors, primary) - Sass 不支持运行时打印 map 内容，调试时可用
@error inspect($theme-map)查看当前主题结构 - 最常被忽略的一点：
deep-map-get返回的值保留原始单位和类型，lighten($color, 10%)对从 map 读出的颜色有效，但对字符串"#007bff"会失败——确保 map 里存的是 Sass 颜色对象，不是字符串
