Less中用.each()生成不等宽网格列需正确声明逗号分隔List，配合.make-grid-cols()递归函数拼接grid-template-columns值，并利用索引为各列添加独立样式。
Less里用.each()生成不等宽网格列
Less本身不内置网格系统，但能靠.each()配合List批量生成CSS规则——关键不是“模拟Bootstrap”，而是按实际列宽需求（比如1fr、2fr、auto）动态输出grid-template-columns值。List必须是明确的值序列，不能是计算表达式。
常见错误是把@columns: 1fr 2fr auto;直接传给.each()，结果报错Property is not defined——因为Less的.each()只接受逗号分隔的List，不是空格分隔的字符串。
-
@columns: 1fr, 2fr, auto;✅ 正确声明List -
.each(@columns, .(@col) { ... });✅ 循环体中用@col引用当前项 - 若需拼接成完整
grid-template-columns，别在循环里逐条写grid-column，而应先用.make-grid-cols()函数聚合
用.make-grid-cols()函数拼接非均匀列宽值
手动拼字符串易出错，推荐封装一个递归函数来把List转成空格分隔的CSS值。Less不支持join()，得靠递归+extract()和length()实现。
示例：
.make-grid-cols(@list, @i: 1) when (@i = length(@list)) { "" }
// 使用
@cols: 1fr, 3fr, minmax(200px, 1fr), auto;
.grid-layout {
grid-template-columns: .make-grid-cols(@cols);
}
注意：.make-grid-cols()返回的是纯字符串，不会自动加引号或单位转换；如果List里混用"200px"和1fr，必须统一用带引号字符串或都不带——Less对单位敏感，1fr和"1fr"类型不同。
Each循环中为每列添加独立样式（如gap、justify-content）
单纯定义列宽不够，常需为第n列设置不同justify-self或background。这时.each()的索引参数就派上用场了。
- 用
.each(@list, .(@item, @i) { ... })可同时拿到值和下标（从1开始） - 下标可用于条件判断：
when (@i = 1) { justify-self: start; } - 避免用
@i + 1做类名拼接（如.col-@{i}），因为Less不支持变量插值到选择器中——得改用&[data-col="@{i}"]这类属性选择器 - 若要生成响应式断点下的不同分布，需嵌套
@media块进循环体，但注意每个@media会生成独立规则，体积增长快
为什么不用CSS原生grid-template-columns: subgrid？
Subgrid目前仅Chrome/Firefox支持，且要求父容器设display: grid并显式定义grid-template-rows/columns，无法动态生成。Less循环的本质价值在于：在构建时（build time）把设计稿里的非均匀列配置固化为CSS，避开运行时JS计算或浏览器兼容性兜底。
真正容易被忽略的是List数据源管理——别把@columns硬编码在组件Less文件里，应抽到variables.less中统一维护，否则改一个列宽要搜遍所有文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
