less 中无 length() 函数，无法直接获取 list 长度；需用递归 mixin 结合 extract() 函数，通过索引从 1 开始逐项提取并判空来隐式计数。
Less 中没有 length() 函数，也不能直接获取 List 长度
Less 语言本身不提供类似 JavaScript 的 length 函数，也没有内置方法返回 List（如 @list: 1px 2px 3px）的元素个数。试图写 length(@list) 会报错：Unrecognised input 或 Unknown function length。这是初学者最常踩的坑——把 Sass 的语法习惯带进了 Less。
用递归 mixin 模拟“遍历 List”并隐式计数
Less 支持递归 mixin 和 extract() 函数，可手动实现“按索引取值 + 判断是否越界”逻辑，从而间接控制循环次数。关键点在于：List 索引从 1 开始，且 extract(@list, @i) 在 @i 超出范围时返回空值（不是报错），可据此终止递归。
常见写法示例：
.loop-list(@list, @i: 1) when (@i = <p>❌ 错误示范 —— <code>length(@list)</code> 在 Less 中根本不存在。正确做法是靠 <code>extract()</code> 返回值是否为空来判断：</p>
- 定义一个空哨兵值（比如
~""），和extract(@list, @i)对比 - 用
isstring()或ispixel()等类型判断函数辅助识别有效项（但有局限性） - 更稳妥的方式：预先传入长度，或由调用方明确知道 List 元素数
实际可用的替代方案：用已知长度 + for 式 mixin 展开
如果你能确定 List 长度（比如固定 3 个颜色），就不要硬套“动态求长”，直接展开更可靠：
.gen-variants(@colors) {
.item-1 { background: extract(@colors, 1); }
.item-2 { background: extract(@colors, 2); }
.item-3 { background: extract(@colors, 3); }
}
@my-colors: #f00 #0f0 #00f;
.gen-variants(@my-colors);
这种写法无兼容性问题，编译结果清晰，也避免了递归深度限制（Less 默认递归上限约 64 层，深层嵌套易触发 Recursive call error）。
如果 List 来源不可控，建议前置处理：用构建工具（如 PostCSS、Node.js 脚本）把 List 转成带长度注释的 Less 变量，再交由 Less 编译。
为什么别在 Less 里执着“动态长度”？
Less 是编译时静态预处理器，不具备运行时数据能力。所谓“循环”只是语法糖式的重复展开，所有分支必须在编译前可穷举。真正需要动态长度逻辑（比如根据数组长度生成不同数量的媒体查询），应该交给 CSS Custom Properties + JavaScript，或换用支持真实循环的 Sass/PostCSS。
最容易被忽略的一点：即使你用各种技巧“模拟出长度”，最终生成的 CSS 仍是静态的——它不会随 JS 修改变量而重算。把动态逻辑塞进 Less，只会让维护变脆弱，调试变困难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
