Less中不存在extract函数，它是Sass的内置函数；Less提取列表第N项需用带索引的递归混合或length()配合each()模拟实现。
extract函数在Less中根本不存在
Less语言本身不提供 extract 函数，这是常见误解——它实际是 Sass 的内置函数（nth($list, $n) 或 list.nth()）。直接在 Less 中写 extract(@list, 1) 会报错：Unrecognised input 或 Function extract is undefined。
Less 处理列表索引的核心方式是「列表解构 + 混合递归」，没有原生下标访问语法。
Less中正确提取列表第N个值的两种实操方式
Less 支持用逗号分隔的值序列（如 @colors: red, blue, green;），但必须通过混合（mixin）配合 length()、extract()（错误！重申：不存在）等函数组合实现“模拟提取”。真正可用的是：
-
方式一：用
extract()？不行。改用nth()？也不行。 Less 没有nth()—— 它只有length()和each()（v4.0+），但each()不返回单个值。 - 方式二：定义带索引参数的混合，手动展开 —— 这是最稳定、兼容性最好的做法：
.get-nth(@list, @n) when (@n = 1) {
@value: extract(@list, 1); // ⚠️ 注意：这行仍会报错！
}
等等，上面又写了 extract？别被误导。Less 确实有个 **隐藏的、未文档化的 extract()**，但它只在极老版本（
立即学习“前端免费学习笔记（深入）”；
✅ 正确路径只有一条：用 nth() 风格的 mixin 手动匹配索引：
.get-1st(@list) { @value: %("%s", @list); }
.get-2nd(@list) when (isstring(@list)) {
// Less 无法动态切分字符串，所以必须提前拆成变量
}
更现实的做法是放弃“运行时索引提取”，改用命名变量或 map：
- 用
@primary-color: red;代替@colors[0] - 用
@theme: { primary: red; secondary: blue; };（Less v4+ map 语法），再用map-get(@theme, primary)
为什么不能像Sass一样用 nth($list, 2)？
Less 的设计哲学偏向「编译期确定性」，不鼓励运行时列表操作。它的 length() 能返回列表长度，但没有配套的索引访问器。尝试强行模拟会导致：
- 嵌套过深时编译失败（栈溢出）
- 无法处理空列表或越界索引（无异常，静默返回空）
- Webpack / Vite 插件对自定义 mixin 递归支持不一致，本地能跑，CI 可能报错
- VS Code Less 插件无法提示，写错索引只能靠编译后看 CSS 输出反推
替代方案：用 JavaScript 预处理或 CSS 自定义属性
如果真需要动态索引（比如主题色轮播、响应式断点数组），Less 不是合适工具：
- 用 PostCSS 插件（如
postcss-less-vars）在构建时注入计算好的值 - 把列表逻辑移到 JS：定义
const breakpoints = ['320px', '768px', '1024px'];，再用document.documentElement.style.setProperty('--bp-2', breakpoints[1]); - CSS 中用
:root { --color-1: red; --color-2: blue; }，Less 只做变量映射，不负责提取
Less 的列表本质是「宏替换占位符」，不是数据结构。想用索引，就得接受它不支持——这不是配置问题，是语言边界。
