SCSS 的 nth() 和 append() 函数需严格遵循编译期语义：nth() 索引从1开始且不支持负数，越界即报错；append() 默认空格分隔，逗号需显式声明 comma，多值拼接优先用 join() 并预检长度。
SCSS 的 nth() 和 append() 是处理多值 CSS 属性（如 margin、font-family、box-shadow）最常用的两个列表函数，但它们的行为和边界条件和 JS 完全不同——直接套用编程经验容易编译失败。
nth() 取值必须从 1 开始，且越界即报错
SCSS 列表索引是语义序号，不是内存偏移。写 nth($list, 0) 或 nth($list, length($list) + 1) 都会触发编译错误：SassError: Invalid argument for nth()。
- 遍历必须用
@for $i from 1 through length($list)，不能从 0 开始 - 取末项写
nth($list, length($list))，不是nth($list, -1)（SCSS 不支持负索引） - 若不确定长度，先
@if length($list) >= 3再调用nth($list, 3)，否则崩溃 - 对 map 值提取时，
nth(map-get($theme, fonts), 2)前得确认map-has-key($theme, fonts)
append() 默认用空格分隔，逗号需显式声明
append() 的行为取决于输入列表的分隔符和是否传入 $separator 参数。不加参数时，它会“继承”第一个参数的分隔方式；但如果你期望拼出 font-family: Helvetica, Arial, sans-serif 这类逗号分隔字符串，就必须指定 comma。
-
append((Helvetica), Arial)→Helvetica Arial（空格） -
append((Helvetica), Arial, comma)→Helvetica, Arial（逗号） -
append(10px, 20px, comma)→10px, 20px，但注意：单值列表默认无分隔符，comma才强制生效 - 追加多个值要嵌套调用：
append(append($list, $val1), $val2, comma)，或改用join()
处理多值 CSS 属性时，别把 list 当 string 用
像 margin: 0 1em 2px 这种属性在 SCSS 中是空格分隔列表，但你不能直接把它当字符串拼接。常见错误是：margin: append($base-margin, #{$extra}) —— 如果 $extra 是带单位的数值，结果可能是 0 1em 2px4px（缺空格）。
立即学习“前端免费学习笔记（深入）”；
- 单位必须紧贴数值：
#{nth($m, 1)}px比#{nth($m, 1)} px更安全 - 动态生成多值属性，优先用
join($list, ' ')或join($list, ', ')显式控制分隔符 - 避免在循环中反复调用
nth()提取同一组值；提前解构：$top: nth($margin, 1); $right: nth($margin, 2) - 初始化变量统一用
()（空列表），不用null或未定义，否则append((), val)会失败
真正容易被忽略的是：SCSS 列表函数全部在编译期执行，没有运行时容错。一个没检查 length() 就调用 nth() 的地方，可能让整个样式表编译中断——而这个错误不会出现在浏览器控制台里，只在构建日志里闪一下就没了。
