Less CSS中如何通过循环结构生成栅格系统？-css教程-PHP中文网

less中可用递归混合模拟循环生成栅格类，如.make-grid(12)配合守卫when (@i > 0)和插值@{i}生成.col-1至.col-12，避免硬编码；each()和js函数因兼容性、静态分析及构建工具限制不推荐。

less css中如何通过循环结构生成栅格系统？

Less 中用 `.loop()` 递归混合生成栅格类名

Less 本身不支持 for 循环语法，但可通过递归混合（recursive mixin）模拟循环。这是生成 .col-1 到 .col-12 这类栅格类最可靠的方式，避免硬编码。

关键点在于：定义一个带计数器参数的混合，每次调用时递减，直到终止条件满足。注意必须显式写 when (condition) 守卫，否则会无限递归报错。

.col-@{i} 类名中使用插值 @{i}，不能直接写 .col-i
起始调用必须带初始值，比如 .make-grid(12);，否则不会触发任何输出
守卫条件要覆盖边界，例如 when (@i > 0) 比 when (@i >= 1) 更安全

.make-grid(@i) when (@i > 0) {
  .col-@{i} { width: (100% / 12 * @i); }
  .make-grid(@i - 1);
}
.make-grid(12);

为什么不用 `each()` 或 JavaScript 函数？

Less 3.5+ 引入了 each()，但它要求传入 list 或 map，且无法在顶层 CSS 规则中直接展开为多个选择器——它更适合批量设置属性值，而非生成类名结构。而 JS 函数（如 ~`Array.from({length:12},(_,i)=>`.col-${i+1}`)`）属于运行时求值，破坏 Less 的静态编译特性，导致 source map 错乱、IDE 无法跳转、构建工具（如 webpack-less-loader）可能报错。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

each() 只能用于属性值批量赋值，例如 each(@breakpoints, { ... })
JS 模板字符串在 Less 中是反引号 ~`...`，但编译期不可控，调试困难
递归混合是官方推荐、全版本兼容、可静态分析的方案

响应式栅格需要嵌套循环？别嵌套，用多层递归混合

为不同断点（sm、md、lg）生成 .col-sm-4、.col-md-6 等，不是在单个混合里加两层循环，而是拆成「断点循环 + 列数循环」两个正交混合。这样逻辑清晰，也方便单独覆盖某一层。

先定义 .make-grid-breakpoint(@bp, @max: 12)，内部调用 .make-col(@bp, @i)
每个断点调用一次，比如 .make-grid-breakpoint(sm, 12);、.make-grid-breakpoint(md, 12);
避免在 .make-col 内部再调用另一个递归混合，否则编译速度下降明显，且容易触发栈溢出警告

.make-grid-breakpoint(@bp, @max) when (@max > 0) {
  .make-col(@bp, @max);
  .make-grid-breakpoint(@bp, @max - 1);
}
.make-col(@bp, @i) {
  .col-@{bp}-@{i} { width: (100% / 12 * @i); }
}