less不支持运行时数组和循环渲染，其“.each()”等机制仅在编译期静态展开逗号分隔的伪列表，无法处理对象数组或动态数据，需用构建工具或css-in-js实现真循环。
Less 里根本没有数组和循环渲染
Less 是一门 CSS 预处理器，不是编程语言，它不支持运行时数组、for 循环或类似 JavaScript 的 map() 渲染逻辑。所谓“用数组循环生成样式”，实际是靠 Less 的 .each() 混合（v4.0+）或手动展开 + 参数化混合模拟的——本质是编译期静态展开，不是动态渲染。
用 .each() 混合遍历逗号分隔的值列表
Less v4.0 起内置了 .each()，但它只接受逗号分隔的「伪列表」（如 red, blue, green），不是数组类型。它会为每个值调用一次传入的混合，并注入 @value 和可选的 @key（索引）。
常见错误：把空格分隔的值（red blue green）直接传给 .each()，结果只收到一个项；或误以为能嵌套循环——.each() 不支持递归或嵌套调用。
- 必须用逗号分隔：
.each(red, blue, green, { ... }) - 混合体中用
@value引用当前项，比如color: @value; - 若需带类名后缀，可用字符串拼接：
.item-@{value} { color: @value; } - 不支持对象数组（如
(name: primary, color: #007bff)），只能扁平值列表
手动模拟「数组」+ 多层混合展开的替代方案
低于 v4.0 或需要更灵活控制时，得靠递归混合 + 列表切片。Less 的列表本质是空格或逗号分隔的值序列，extract() 和 length() 可配合使用。
典型陷阱：忘记终止条件导致无限编译报错；或对空列表调用 extract() 返回空值，引发意外样式输出。
- 定义列表变量：
@colors: red blue green; - 写递归混合，用
length(@list)判空，extract(@list, 1)取首项，slice(@list, 2)取剩余 - 每次递归处理首项，再调用自身处理剩余部分
- 性能上无影响（纯编译期），但可读性差，调试困难，建议仅在
.each()不适用时用
别把 Less 当 CSS-in-JS 用
真正需要动态循环渲染（比如根据 API 数据生成主题类、响应式断点批量输出），Less 就不是合适工具。此时应切换到构建层处理：用 PostCSS 插件、Webpack loader 或构建脚本生成 CSS 文件，或者直接用 CSS-in-JS 库（如 Emotion、Styled Components）。
最容易被忽略的一点：Less 编译结果完全静态，所有「循环」都在你敲下 lessc 命令那一刻就固化了——改数据？得重编译，没法热更新，也没法按用户偏好实时换肤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
