nth()索引越界会直接编译失败，必须满足1≤索引≤length($list)，否则报sasserror；取值前须用@if length($list)≥n校验，且不可用负数或零索引，末项应写nth($list,length($list))而非nth($list,-1)。
nth() 索引越界会直接编译失败
Sass 的 nth() 不是运行时容错函数，而是编译期硬校验：索引必须 ≥1 且 ≤length($list)，越界就报 SassError: Invalid argument for nth()。它不像 JavaScript 的 arr[5] 返回 undefined，而是彻底中断构建。
常见翻车点：
- 写
nth($list, 0)或nth($list, -1)—— Sass 不支持负索引或零基索引 - 遍历用
@for $i from 0 through length($list)—— 第一次就崩 - 没检查长度就调用
nth($list, 3)，而$list只有 2 个元素 - 从
map-get($map, key)拿到值后，直接传给nth()却没确认返回值是否为 list（可能为 null 或 string）
安全取值必须先判空再查长度
不能靠“运气”假设列表够长。所有对 nth() 的调用，都得包裹在条件判断里。
- 取首项：
@if length($list) >= 1 { $first: nth($list, 1); } - 取末项：
@if length($list) >= 1 { $last: nth($list, length($list)); }（不是nth($list, -1)） - 取第 3 项：
@if length($list) >= 3 { $third: nth($list, 3); } - 从 map 提取后再用：
$fonts: map-get($theme, fonts); @if length($fonts) >= 2 { $secondary: nth($fonts, 2); }
append() 和 join() 的分隔符陷阱
append() 默认继承第一个参数的分隔方式，但多数 CSS 多值属性（如 font-family、background-image）要求逗号分隔，不显式声明就会出错。
- 错误写法：
$stack: append($stack, "sans-serif")→ 输出"Helvetica" "Arial" sans-serif（空格分隔，CSS 解析为单个标识符） - 正确写法：
$stack: append($stack, "sans-serif", comma)或更推荐：$stack: join($stack, ("sans-serif"), comma) - 拼接渐变停点必须用
join($stops, comma)，否则linear-gradient(to right, $stops)会报Invalid CSS after "to right,": expected expression -
join()比append()更可控，尤其当你要拼多个项时，避免链式append(append(...))
比 nth() 更稳的替代方案：改用 map
靠索引取值本身就不适合语义化数据。比如多层背景、断点配置、图标坐标——一旦增删字段，所有 nth($list, X) 全失效。
- 把扁平 list：
$layers: (url(a.png), top, cover, no-repeat, url(b.png), center...)→ 改成 map：layer1: (img: url(...), pos: top, size: cover, repeat: no-repeat) - 取值从
nth($layer, 1)变成map-get($layer, img)，字段名即文档，不怕顺序变动 - 嵌套 map 访问需链式：
map-get(map-get($themes, light), bg)，但至少不会因加一个origin字段就全乱 - 用
map-has-key($layer, img)防御性检查，比@if length($layer) >= 1更精准
map-get() 查不到键返回 null，nth() 越界直接中断——它们都不抛异常，而是让编译器拒绝生成 CSS。你得在写的时候就预判所有分支，而不是等上线才发现背景图全丢了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
