list-nth 是 scss 编译期函数，仅接受字面量整数索引，无法响应运行时变量、媒体查询或 js 动态值；正确用法是预定义固定序号样式类，或改用 css 自定义属性 + :nth-child / js 动态控制。
list-nth 不能直接用于 CSS 自定义属性或运行时颜色计算
list-nth 是 SCSS 编译期函数，只在构建时生效，无法响应用户交互、媒体查询切换或 JS 动态索引。它不生成“可变逻辑”，只是把写死的列表项提前取出来。如果你期望类似 color: nth($colors, $i) 中 $i 来自 JS 变量或 @media 条件——这行不通。
常见错误现象：Undefined variable "$i" 或编译报错 Invalid CSS after "...list-nth($colors,": expected expression，本质是把运行时变量当成了编译期数值传入。
-
list-nth的第二个参数必须是**字面量整数**（如1、3），不能是变量（即使该变量本身是数字） - SCSS 不支持“动态索引展开”，即没有
list-map或list-each类似 JS 的遍历能力 - 若想实现“第 N 个主题色”，得靠预定义规则（如
.text-color-1、.bg-color-3）或 CSS 自定义属性 + JS 控制
正确用法：用 list-nth 提前提取固定位置的颜色值
适用于设计系统中已知序号的场景，比如按钮状态色、图表系列色、层级背景色等。核心是把“索引”当作配置常量，而非变量。
$brand-colors: #007bff, #6f42c1, #28a745, #dc3545, #ffc107;
<p>.text-primary { color: list-nth($brand-colors, 1); }
.text-secondary { color: list-nth($brand-colors, 2); }
.bg-accent { background-color: list-nth($brand-colors, 5); }
</p>
注意：list-nth 索引从 1 开始（不是 0），越界会报错 Index out of bounds for list。
- 推荐配合
@if+length()做安全检查（尤其在 mixin 中复用时） - 避免嵌套调用如
list-nth(list-nth($list-of-lists, 2), 1)，可读性差且难调试 - 颜色列表建议用命名变量（如
$ui-colors）而非魔法数组，便于维护
替代方案：用 CSS 自定义属性 + :nth-child 实现“伪动态”颜色轮播
如果目标是让一组元素按顺序循环使用颜色列表（如数据卡片、标签云），不用 JS 就能实现，靠的是 CSS 层叠和 :nth-child。
:root {
--color-1: #007bff;
--color-2: #6f42c1;
--color-3: #28a745;
}
<p>.card:nth-child(3n+1) { background-color: var(--color-1); }
.card:nth-child(3n+2) { background-color: var(--color-2); }
.card:nth-child(3n+3) { background-color: var(--color-3); }
</p>
这种方式完全脱离 SCSS 运行时限制，浏览器原生支持，且可被 JS 修改 style.setProperty 覆盖。
- 适合静态结构、固定数量颜色的视觉节奏控制
- 不适用于“根据数据字段值映射到颜色”的逻辑（那需要 JS 或后端模板）
- 注意
:nth-child匹配的是 DOM 顺序，不是数据顺序；若卡片有隐藏/条件渲染，需改用:nth-of-type或加 class 控制
真正需要 JS 动态取色时，别在 SCSS 里硬扛
当颜色索引来自 API 返回、URL 参数或用户选择（如 ?theme=4），SCSS 已退出舞台。此时应由 JS 读取颜色列表（JSON 或 data-* 属性），再注入样式或 class。
<div id="chart" data-colors='["#007bff","#6f42c1","#28a745"]'></div>
JS 中：
const el = document.getElementById('chart');
const colors = JSON.parse(el.dataset.colors);
const index = getDesiredIndex(); // 来自逻辑判断
el.style.color = colors[index % colors.length];
这个路径清晰、可调试、易测试。强行用 SCSS @function 模拟数组查找只会增加编译复杂度，且无法应对异步数据。
最容易被忽略的一点：很多人试图用 @each + @index 生成一堆 class 应对所有可能索引，结果产出冗余 CSS。真要覆盖 1–100 种颜色组合？不如交给 JS 按需设置 style 或 class 名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
