sass中多维结构需用map-get()和list-nth()手动拆解，因不支持真多维数组；须类型判断、展开运算符...、单位对齐及逐层key校验以防null崩溃。
用 map-get() 和 list-nth() 拆解嵌套结构
Sass 本身不支持真正意义上的“多维数组”，所谓多维变量其实是 map 套 list、map 套 map 或 list 套 list 的组合。直接写 $grid: ((12, 8), (6, 4)) 看似二维，但 Sass 会把它当做一个含两个 list 元素的顶层 list，不是矩阵。要取第二行第一列就得先 list-nth($grid, 2) 得到 (6, 4)，再 list-nth(..., 1)。如果用 map 存，比如 $breakpoints: ("sm": (480px, 1fr), "md": (768px, 2fr))，就必须用 map-get($breakpoints, "md") 拿出整个子项，再用 nth(..., 1) 取宽度。
避免在循环中直接展开 map 值做计算
常见错误是写 @each $key, $val in $config { width: nth($val, 1) * 2; }——这会失败，因为 $val 是一个 list 或 map，而 nth() 要求第一个参数是 list 类型。Sass 不会自动把 map 解包成 list。必须显式判断类型：
- 用
type-of($val) == "list"分支处理 - 或统一用
map-values()提前扁平化（仅适用于单层 map） - 更稳妥的是封装一个
@function get-item($container, $i, $j: null)，内部根据type-of自动 dispatch
mixins 中传入多维参数时，必须用 ... 展开
定义一个接受栅格配置的 mixin：@mixin grid-layout($rows...)，调用时若传 $rows: (1fr, 2fr, auto)，不加 ... 就会被当做一个参数整体传入，$rows 在函数体内就只是个 list，无法被 @each 直接遍历。正确写法是：@include grid-layout($row-config...)，其中 $row-config 是已组装好的 list。漏掉 ... 是编译期静默失败的高发点——它不会报错，但生成的 CSS 完全不对。
颜色与尺寸混合计算时，单位和类型必须对齐
比如有 $theme: ("primary": (#007bff, 1rem), "danger": (#dc3545, 0.875rem))，想同时取颜色和字号：$pair: map-get($theme, "primary")。这时 nth($pair, 1) 是颜色，nth($pair, 2) 是带单位长度。但如果你后续想算 lighten(nth($pair, 1), 10%) 没问题，而 nth($pair, 2) * 1.2 也没问题；一旦写成 nth($pair, 1) + nth($pair, 2) 就会报 Incompatible units rem and color。Sass 的类型检查在运行时才触发，这类错误往往只在特定分支下暴露。
真正麻烦的是跨层级引用：比如 map-get(map-get($themes, $mode), "text") 这种写法，一旦某层 key 不存在，Sass 返回 null，后续 nth(null, 1) 直接崩溃。所以任何深度访问都得前置 @if map-has-key(...) 校验——这点容易被跳过，尤其在快速原型阶段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
