CSS如何通过Less循环批量生成网格布局类名_Each循环与Range函数实战演练-css教程-PHP中文网

Less中.each()要求@list必须是明确列表而非字符串，因其仅接受List或Map；传入字符串如"1,2,3"会被视为单个值导致循环仅执行一次；正确方式是用range(1,12)生成数字列表或显式声明@nums: 1,2,3。

css如何通过less循环批量生成网格布局类名_each循环与range函数实战演练

Less中`.each()`循环生成网格类名时，为什么`@list`必须是明确的列表而非字符串？

因为.each()只接受List（逗号分隔的值序列）或Map作为第一个参数，传入字符串（如"1,2,3"）会被当作单个字符串值处理，导致循环只执行一次且@item等于整个字符串。常见错误是误用range(1, 12)直接传给.each()——它返回的是一个List，但需确保未被意外转成字符串。

正确做法：

用range(1, 12)生成数字列表，它返回1, 2, 3, ..., 12（逗号分隔的Less List）
避免中间拼接：@str: "1,2,3"; .each(@str, ...) ❌；应写为@nums: 1, 2, 3; .each(@nums, ...) ✅
若需动态范围，优先用range()，不用extract()或length()手动构造

用`range()`配合`.each()`生成`.col-1`到`.col-12`的完整示例

Less不支持for-in或传统索引循环，range() + .each()是最简洁可靠的批量方式。注意range()包含起止值，range(1, 12)生成12个元素。

.col-12 {
  width: 100%;
}
.each(range(1, 12), {
  @i: @value;
  .col-@{i} {
    width: (@i * 100% / 12);
  }
});

编译后会输出.col-1（8.333%）、.col-2（16.666%）…….col-12（100%）。关键点：

@value是range()当前项的数值，直接可用，无需extract()
@{i}用于变量插值，不可写成.col-@i（Less会报错）
除法要加括号(@i * 100% / 12)，否则@i * 100% / 12可能被解析为单位运算错误

生成响应式网格类（如`.col-md-4`）时，如何嵌套两层`.each()`？

Less不支持多层for循环语法，但可借助嵌套.each()实现：外层遍历断点，内层遍历列数。注意作用域——内层@value会覆盖外层，需提前用@bp、@cols重命名。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.each(md, lg, xl, {
  @bp: @value;
  .each(range(1, 12), {
    @cols: @value;
    .col-@{bp}-@{cols} {
      flex: 0 0 (@cols * 100% / 12);
      max-width: (@cols * 100% / 12);
    }
  });
});

这会生成.col-md-1、.col-md-2…….col-xl-12共36个类。容易踩的坑：