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 = <p>调用时传入列表即可：<code>@columns: 20px 40px 60px;</code> → 输出三列类名。注意：<code>nth()</code>索引从1开始，不是0；空格分隔的值才算列表项，逗号分隔会被视为多个参数而非单个列表。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3>容易踩的坑：列表格式、单位一致性与性能</h3>
-
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的列表操作本质是编译期静态展开，真需要灵活提取，它不是合适工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
