scss中list.length与nth需配合使用：length($list)获取长度，nth($list, 1)从索引1开始取值，越界返回null；处理map须先转为列表（如map-values($map)），不可直接对map调用nth。
list.length 和 list.nth 怎么配合提取多值？
SCSS 的 list 函数本身不生成 CSS，但能帮你从变量中安全取值，避免硬编码。比如你有一组断点宽度：$breakpoints: (sm: 320px, md: 768px, lg: 1024px)，想动态生成 @media 规则——这时不能直接用 list.length 查 map 长度（它只对纯列表有效），得先转成列表：map-keys($breakpoints) 或 map-values($breakpoints)。
常见错误是把 map 当 list 传给 nth($list, 1)，结果报错 "Function nth doesn't support maps"。正确做法：用 map-get($breakpoints, sm) 取值，或用 nth(map-values($breakpoints), 1) 按索引取第一个值。
注意：list.nth 索引从 1 开始，不是 0；越界会静默返回 null，可能造成属性缺失却无提示。
怎么用 list.join 拼接带单位的多值（如 transition）？
CSS 的 transition 属性常需多个“属性 时间 曲线”组合，比如 color 0.2s ease, opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)。手动拼容易漏逗号或空格，用 list.join 更可靠。
list.join 默认用空格连接，但你需要逗号+空格分隔多个子项，所以得指定分隔符：list.join($transitions, ', ')。关键点在于：每个子项本身必须是单个字符串（不能是嵌套列表），否则会转成 unquote() 后的原始文本，可能破坏语法。
实操建议：
- 把每个 transition 子项写成字符串变量：
$fade: 'opacity 0.3s ease'; $move: 'transform 0.2s cubic-bezier(0.2, 0, 0.2, 1)'; - 组成列表：
$all-transitions: ($fade, $move); - 拼接：
transition: list.join($all-transitions, ', ');
别用 join($fade, $move) —— 这是函数名错误，SCSS 里只有 list.join。
map-to-list 转换后怎么循环生成多组 margin/padding？
当你有一组响应式间距配置：$spacers: (xs: 0.25rem, sm: 0.5rem, md: 1rem, lg: 1.5rem)，想批量生成 .m-xs-1、.p-md-2 这类工具类，就得把 map 转成可遍历的 list。
最简方式是用 map-keys($spacers) 得到 (xs, sm, md, lg)，再用 @each 遍历；或者用 map-values($spacers) 直接取数值。但注意：map 是无序的，SCSS 不保证遍历顺序，所以如果顺序敏感（比如想按从小到大生成），应显式定义为有序列表：$spacer-keys: xs, sm, md, lg;，再用 @each $key in $spacer-keys。
性能影响很小，但若在深层嵌套中反复调用 map-keys，可能轻微拖慢编译——建议提前提取并缓存：$keys: map-keys($spacers);。
为什么 list.append / list.concat 容易导致类型混乱？
list.append($list, $value) 看似方便，但默认行为是「追加为新元素」，而 list.concat($list1, $list2) 是合并两个列表。问题在于：如果 $value 是一个带空格的字符串（如 '1px solid #ccc'），append 会把它当单个元素；但如果你误传了另一个列表，它会嵌套成二维结构，后续 nth 取值就出错。
典型错误现象：border: nth($borders, 1); 返回 1px 而不是 1px solid #ccc，说明 $borders 实际是 (1px, solid, #ccc) —— 因为之前用了空格分隔的字符串却没用引号包裹，SCSS 自动拆成了三个值。
安全做法：
- 所有含空格的 CSS 值，必须用引号包裹再入列：
$borders: ('1px solid #ccc', '2px dashed red'); - 追加时明确意图：
list.append($borders, '3px dotted blue')，而不是list.append($borders, 3px dotted blue)（后者会被解析为三个独立 token） - 避免混用：不要把 map、string、number 直接塞进同一列表，类型不一致会让
list.length行为难以预测
最常被忽略的是引号——SCSS 里不加引号的多词值不是字符串，而是空格分隔的多个值，list 函数会照单全收，后面取的时候才发现“明明写了一个值，怎么变成三个”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
