list.nth 是 SCSS 编译期静态取值函数，需配合 @for 循环生成多条 CSS 规则，索引从 1 开始，越界返回 null；动态样式需靠循环展开，不可直接用于运行时响应。
list.nth 不能直接用于生成动态样式，它只是静态取值工具
list.nth 是 SCSS 的内置函数，作用是在编译期从 list 中按索引取出一个值，比如 list.nth($colors, 1) 返回列表第一个元素。它不支持运行时计算、不响应数据变化、也不能嵌套在选择器或属性名中动态生成规则——CSS 本身没有“动态样式”概念，所有样式都是编译后固定的。
常见误解是想用它实现“第 n 个子元素用第 n 种颜色”，结果写成类似 color: list.nth($colors, $i) 并期望循环生效，这会报错或返回空值，因为 $i 没有被定义，且 SCSS 不允许在属性值里自由插值索引变量（除非配合 @for 或 @each）。
真正可行的写法：配合 @for 循环批量生成类名
要让“索引 → 值 → CSS 规则”链路跑通，必须把 list.nth 放进循环体内部，在编译阶段展开为多条静态规则。
例如给前 5 个 .item 设置不同背景色：
$colors: #ff6b6b, #4ecdc4, #44b5b1, #feca57, #556270;
@for $i from 1 through length($colors) {
.item:nth-child(#{$i}) {
background-color: list.nth($colors, $i);
}
}
关键点：
-
@for $i from 1 through length($colors)提供合法索引（SCSS list 索引从 1 开始） -
#{$i}是插值语法，把数字转成 CSS 选择器里的字符串 -
list.nth($colors, $i)在每次迭代中求值，确保取到对应位置的值 - 最终输出的是 5 条独立 CSS 规则，不是“一条动态规则”
容易踩的坑：索引越界、类型不匹配、混淆 nth-child 和 nth-of-type
错误现象：list.nth($colors, 6) 返回 null，导致编译警告甚至属性丢失；或者把字符串列表误当颜色传给 background-color。
使用时注意：
-
list.nth索引超出范围时返回null，不会报错但会导致样式失效——务必确认$i不超过length($list) - 若列表含混合类型（如
(red, "bold", 12px)），取值后需手动判断类型，list.nth不做自动转换 -
:nth-child(n)匹配父元素下第 n 个子元素，和元素类型无关；如果目标是“第 n 个 .item”，应确保 HTML 结构中 .item 是连续的直系子元素，否则用:nth-of-type更稳妥
替代方案：用 @each + index() 处理带名称的映射
如果样式需要语义化命名（如 primary、success），比纯数字索引更易维护，推荐改用 map：
$theme-modes: (
primary: #007bff,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
@each $name, $color in $theme-modes {
.btn-#{$name} {
background-color: $color;
}
}
这时候不需要 list.nth，因为 @each 直接解构键值对。只有当你明确依赖位置顺序（比如轮播图 dot 的颜色顺序、阶梯式字体大小）时，list.nth + @for 才是合理选择。
最常被忽略的是：list 索引从 1 开始，而很多人潜意识按数组习惯从 0 写起，一上来就用 list.nth($list, 0)，结果什么也取不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
