Less中不存在extract函数，仅能通过length()和nth()配合递归mixin模拟提取；超长列表易致栈溢出，动态切片不可行；推荐预处理或CSS自定义属性替代。
extract函数在Less中根本不存在
Less没有extract函数。这是常见误解，通常源于混淆了Sass的nth、list.nth或自定义函数写法，或是把JavaScript数组方法（如Array.prototype.extract）误套到Less里。Less原生只支持extract()的**反向操作**：用length()和nth()配合循环模拟提取，但必须手动索引。
用nth() + for循环模拟“提取列表生成多列”
要从一个列表（如@columns: 20px 40px 60px）生成多列CSS（比如.col-1 { width: 20px; }），核心是遍历索引并用nth(@list, @i)取值。Less本身不支持原生for循环，得靠递归mixin：
.make-columns(@list, @i: 1) when (@i =< length(@list)) {
.col-@{i} {
width: nth(@list, @i);
}
.make-columns(@list, (@i + 1));
}
.make-columns(@columns);
调用时传入列表即可：@columns: 20px 40px 60px; → 输出三列类名。注意：nth()索引从1开始，不是0；空格分隔的值才算列表项，逗号分隔会被视为多个参数而非单个列表。
容易踩的坑：列表格式、单位一致性与性能
-
nth()对逗号分隔的值（如20px, 40px）会报错——Less把它解析为多个参数，不是列表。必须写成空格分隔：20px 40px - 混合单位（如
20px 50% auto）虽能编译，但CSS运行时可能失效。建议提前校验或统一单位 - 列表过长（>100项）会导致编译变慢甚至栈溢出，因为递归mixin深度受限。生产环境慎用超长列表
- 无法动态“提取子段”，比如取第2到第4项——必须手动写
nth(@list, 2)、nth(@list, 3)、nth(@list, 4)，不能像JS那样slice(1,4)
更可靠的替代方案：预处理数据或改用CSS自定义属性
如果列配置来自外部（如JSON配置表），与其硬塞进Less列表，不如用构建工具（如PostCSS插件或Webpack loader）在编译前生成CSS，或直接用CSS自定义属性+JS控制：
立即学习“前端免费学习笔记（深入）”；
:root {
--col-1: 20px;
--col-2: 40px;
--col-3: 60px;
}
.col-1 { width: var(--col-1); }
这样规避了Less列表的脆弱性，也便于运行时动态调整。Less的列表操作本质是编译期静态展开，真需要灵活提取，它不是合适工具。
