顶层 $design-system Map 以扁平结构统管设计原子，键名必须加引号、值禁用计算式；取值须严格使用 map-get($map, "key") 链式调用；批量生成工具类需 @each 正确解构并插值；主题应分离至 $themes，避免嵌套污染接口契约。
直接用一个顶层 $design-system Map 统管颜色、间距、断点、圆角、字体层级等所有设计原子，比分散变量更可控、可查、可删——离散变量一多，$spacing-sm 和 $sm-spacing 同时存在，IDE 跳转失效，搜索替换漏掉某处硬编码，就全站错位。
怎么定义扁平但语义清晰的顶层 Map
所有模块必须用字符串键（加引号），避免被解析为未定义变量；每个子 Map 的 key 必须统一，否则 map-get() 取不到值就会返回 null，样式不输出但不报错，排查困难。
-
$design-system必须是一层结构，不嵌套主题，只收拢模块名："color"、"spacing"、"radius"、"type"、"breakpoint" - 子 Map 内部键也必须是字符串：
"sm"、"md"、"primary"、"h1"，不能写成sm（无引号） - 值禁止写计算式，比如
"sm": $base * 4—— 若$base在当前文件未声明或作用域不对，编译失败且错误位置指向map-get调用处，而非定义处
$design-system: (
"color": (
"primary": #007bff,
"text": #333,
"success": #28a745
),
"spacing": (
"sm": 4px,
"md": 8px,
"lg": 16px
),
"breakpoint": (
"sm": 576px,
"md": 768px,
"lg": 992px
)
);怎么安全取值：map-get() 的三个硬规则
map-get() 看似简单，但错一个参数就静默失效（返回 null）或直接报错。它不是语法糖，是编译期校验入口。
- 第一参数必须是 Map 变量本身，不能是中间赋值的局部变量：
$colors: map-get($design-system, "color"); map-get($colors, "primary")可以；但若在@each循环里先$tmp: $colors再map-get($tmp, "primary")，Sass 会报Undefined variable "$tmp" - 第二参数必须是字符串字面量，
map-get($colors, primary)错，map-get($colors, "primary")对；传变量如$key: "primary"; map-get($colors, $key)也错 - 嵌套取值必须链式调用：
map-get(map-get($design-system, "color"), "primary")，Sass 没有原生map-deep-get()
怎么批量生成工具类：@each 解构不能写错
响应式间距类 .p-sm、主题色文本类 .text-primary、断点隐藏类 .d-none-lg——这些不能手写，必须靠 @each 遍历保证全覆盖、单位统一、逻辑集中。
立即学习“前端免费学习笔记（深入）”；
-
@each $name, $value in $spacing是正确解构；@each $value in $spacing错，此时$value是("sm": 4px, "md": 8px)整个键值对，不是单个值 - 生成类名必须用插值：
.p-#{$name}，漏掉{}就输出字面量$name - 循环体内建议加守卫：
@if map-has-key($spacing, $name)，防止某次遍历时$name不存在导致map-get返回null，整条 CSS 规则消失（无提示）
@each $name, $value in map-get($design-system, "spacing") {
.p-#{$name} { padding: $value; }
.m-#{$name} { margin: $value; }
}为什么别把主题塞进 $design-system 顶层
想支持亮/暗色模式？别把 "light" 和 "dark" 当成 $design-system 的一级键。那样会导致所有模块（颜色、间距、字体）都得按主题重复定义，Map 结构臃肿，map-get($design-system, "light") 返回的是个大对象，后续取值要四层嵌套，极易出错。
- 正确做法是另建
$themesMap，只存各主题下的「值映射」："light": ("color": ("primary": #007bff), "spacing": ("sm": 4px)) -
$design-system保持稳定，作为设计规范的“接口契约”；$themes是实现，可随时增删，不影响其他模块 - 导出 CSS 变量时，
@each遍历$themes，用[data-theme="light"]块包裹，而不是往:root里硬塞所有主题值——避免冲突和冗余
真正难的不是写对第一个 map-get()，而是确保第 37 个组件里调用时，"text" 这个键在 "color" 子 Map 中依然存在、拼写一致、没被某个 @import 顺序错乱的文件覆盖掉——Map 结构本身不防错，它只是让错误变得可定位、可收敛。
