如何在Less中批量生成栅格系统的CSS类名_使用递归循环Loop实现自动化-css教程-PHP中文网

less 中无原生 for 循环，.make-grid-columns() 通过带守卫条件的递归 mixin 实现伪循环：定义含计数器参数的 mixin，用 when 控制终止，如 .make-grid-columns(@n, @total: 12) when (@n

如何在less中批量生成栅格系统的css类名_使用递归循环loop实现自动化

Less 里没有真正的 for 循环，`.make-grid-columns()` 是伪递归

Less 不支持原生 for 或 while，所谓“递归循环”其实是利用带条件的 mixin 递归调用自身实现的。核心是定义一个带计数器参数的 mixin，在每次调用时递减或递增该参数，并用 when 守卫（guard）控制终止条件。比如生成 .col-1 到 .col-12，就得写成：

.make-grid-columns(@n, @total: 12) when (@n =<p>注意两点：一是必须显式调用 <code>.make-grid-columns(1)</code> 启动；二是守卫条件里用 <code>=（Less 的“小于等于”写法），不是 <code>，否则不匹配、不执行。</code></code></p><h3>生成响应式栅格类时，<code>@media</code> 嵌套和变量作用域容易出错</h3><p>想为 <code>sm</code>、<code>md</code>、<code>lg</code> 各断点生成 <code>.col-sm-1</code>…<code>.col-lg-12</code>，不能直接在 <code>@media</code> 里调用递归 mixin——因为 Less 会把整个 <code>@media</code> 块当作一个作用域，递归 mixin 若未在该作用域内定义，就会报 <code>Undefined mixin</code>。正确做法是把断点配置抽成 map，再用 <code>.each()</code> 风格遍历（需 Less 4.0+）或手动展开：</p><pre class="brush:php;toolbar:false;">// 手动方式更稳（兼容旧版 Less）
.make-grid-for-breakpoint(@breakpoint, @max: 12) {
  @media (min-width: ~"(@{breakpoint}-width)") {
    .make-grid-columns(1, @max);
  }
}
// 调用前必须先定义变量，如 @sm-width: 576px;
.make-grid-for-breakpoint(sm, 12);
.make-grid-for-breakpoint(md, 12);

常见坑：~"(@{breakpoint}-width)" 中的波浪号用于字符串插值，漏掉会导致媒体查询语法错误；@sm-width 等变量若未提前定义，编译直接失败，不会报“变量未定义”而是报“mixin not found”这种误导性错误。

`.make-grid-columns()` 生成的宽度计算要防浮点误差

Less 计算 (100% / 12 * 5) 可能得出 41.6666666667%，某些浏览器渲染时会因小数位截断导致 12 列总宽不足 100%。解决方案不是四舍五入（round() 会丢失精度），而是改用整数比例 + calc()：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.col-@{n} {
  flex: 0 0 calc(100% / @total * @n);
  max-width: calc(100% / @total * @n);
}

但注意：calc() 在 Less 中是纯字符串，不能参与运算，所以得写死表达式，不能写 calc(@value)。更稳妥的是预设常用分母（如 12、24），用查表法映射：

.col-1  { width: 8.33333333%; }
.col-2  { width: 16.66666667%; }
// …或直接输出 CSS custom property fallback

实际项目中，建议只用递归生成 class 名，宽度值用静态 map 映射，兼顾可读性与精度。

调试递归 mixin 时，`.debug()` 输出不生效？那是守卫没覆盖全

想加 .debug() { content: "n=@{n}"; } 查看当前迭代值，结果什么也不输出——大概率是守卫条件写成了 when (@n ，但初始调用是 <code>.make-grid-columns(1)，当 @total 是 12 时，最后一次调用是 @n: 12，守卫不满足，递归提前终止，.debug() 根本没机会执行。应确保守卫包含等号：