根本原因是Less不支持原生for循环，需用递归mixin或.each()；老版本写for(i in 1..12)会报错或静默失败，推荐递归mixin以确保.col-1至.col-12正确生成。
Less 循环生成栅格类名时，为什么 .col-1 到 .col-12 没生效？
根本原因通常是循环变量未正确注入到选择器中——Less 的 for 不是原生语法，必须用递归 mixin 或 .each()（v4.0+）；老版本强行写 for (i in 1..12) 会直接报错或静默失败。
推荐用递归 mixin，兼容性好且逻辑可控：
.make-cols(@n, @i: 1) when (@i =< @n) {
.col-@{i} { width: percentage(@i / 12); }
.make-cols(@n, (@i + 1));
}
.make-cols(12);
- 必须写
when (@i = 守卫条件，否则无限递归 -
@{i}是变量插值，漏掉@{}就变成字面量.col-i -
percentage(@i / 12)要确保除法先算，否则 Less 可能按字符串拼接
如何为不同断点批量生成响应式栅格类（如 .col-md-6）？
不能把所有断点塞进一个循环里硬套，容易产出冗余 CSS；应分层：先定义断点映射，再对每个断点调用列生成 mixin。
@breakpoints: {
sm: 576px;
md: 768px;
lg: 992px;
xl: 1200px;
};
.each(@breakpoints, {
@key: @key;
@val: @value;
@media (min-width: @val) {
.make-cols(12, @i: 1) when (@i =< 12) {
.col-@{key}-@{i} { width: percentage(@i / 12); }
.make-cols(12, (@i + 1));
}
.make-cols(12);
}
});
-
.each()是 Less v4+ 特性，v3.x 需手动展开断点或升级编译器 - 媒体查询必须包裹在
@media规则内，不能只写@media声明而不嵌套选择器 - 类名拼接用
.col-@{key}-@{i}，顺序错位（如.col-@{i}-@{key}）会导致类名语义混乱
为什么生成的 .col-offset-4 宽度计算不对？
偏移类不是简单复用列宽逻辑，它需要留出左侧空白，本质是 margin-left，且要避免和自身宽度叠加溢出。直接套用 percentage() 会出错。
立即学习“前端免费学习笔记（深入）”；
- 偏移量应基于列数换算：12 栅格中 offset-4 = 左侧空 4 列 =
percentage(4 / 12) - 必须用
margin-left，不是width；否则和.col-8并列时总宽超 100% - 建议单独写 mixin 区分行为：
.make-offsets(@n, @i: 1)，避免和.make-cols()混用参数
编译后 CSS 体积暴增，怎么控制输出粒度？
循环本身不膨胀，但无节制地组合断点 × 列数 × 偏移 × 推送 × 顺序类，很容易生成上千行无效 CSS。关键在提前剪枝。
- 只生成实际用到的列数范围，比如项目只用 1–8，就别循环 1..12
- 断点按需启用：内部系统可能不需要
xl，就在@breakpoints里删掉那行 - 用
//注释掉调试用的循环，Less 编译器会跳过注释块，比删代码更安全
真正麻烦的是响应式类名的优先级和覆盖逻辑——比如 .col-md-6 和 .col-lg-4 同时存在时，浏览器按源码顺序解析，而非按断点大小。这点没法靠循环解决，得靠开发者约定书写顺序。
