Less中用.make-col循环生成响应式列类需基于@grid-columns动态计算宽度，嵌套断点媒体查询，联动声明.make-row负边距与.make-col内边距，并用extract()按需过滤列数与断点以控制CSS体积。
Less里用.make-col循环生成响应式列类，别手写12个
直接上结论：Less的for循环（实际是.each或递归mixin）配合@grid-columns变量，能自动输出.col-1到.col-12及其断点变体，避免手动复制粘贴出错。
常见错误是硬编码width: 8.333%这类值——它只对12列有效，且无法随@grid-columns: 24动态调整。真正灵活的写法得靠计算：
-
@width: (100% / @grid-columns) * @n;—— 列宽必须基于总列数算，不是固定除12 - 断点需嵌套在媒体查询内，不能把
@media (min-width: 768px)写死在循环外 - Less 3.5+才支持
.each，旧版本得用递归mixin，否则报Recursive call to mixin
.make-col-loop(@n, @total) when (@n > 0) {
.col-@{n} { width: (100% / @total) * @n; }
.make-col-loop((@n - 1), @total);
}
.make-col-loop(12, 12);移动端优先时，@screen-sm-min等变量必须参与循环条件
响应式不是“写完默认列再补断点”，而是每个断点都要重新跑一遍列计算逻辑。比如.col-sm-6的宽度不能复用.col-6的值，因为栅格系统可能在小屏切换为单列堆叠。
容易踩的坑是把断点判断写成if (@screen-sm-min > 768px)——Less没有运行时if，只能靠when守卫和变量注入。正确做法是把断点阈值作为参数传入循环：
立即学习“前端免费学习笔记（深入）”；
- 定义
@breakpoints: sm 768px, md 992px, lg 1200px;，再用.each遍历 - 每个断点内调用一次
.make-col，确保.col-md-4的宽度基于@grid-columns重算，而非继承.col-4 - 漏掉
xs断点（即默认无媒体查询）会导致小屏样式丢失，尤其在iOS Safari中表现异常
.make-row的margin负值必须匹配.make-col的padding
网格对齐失效的多数情况，不是列宽算错，而是行容器的负边距没跟上列内边距节奏。Less里这两者必须联动声明：
-
.make-row设margin-left: -(@grid-gutter-width / 2);，则.make-col必须设padding-left: (@grid-gutter-width / 2); - 如果
@grid-gutter-width在断点间变化（如sm用15px，lg用30px），.make-row的负边距也得按断点重算，否则出现水平滚动条 - 用
box-sizing: border-box包裹列元素，否则padding会撑破100%宽度——这个细节常被忽略，尤其在嵌套网格时
编译后CSS体积暴增？用extract()拆分断点避免冗余
循环生成所有断点的所有列类，容易让CSS膨胀。比如12列×4断点×12数值=576个选择器，而实际项目可能只用到.col-6、.col-md-4、.col-lg-3三个。
解决办法不是删代码，而是用extract()函数做条件过滤：
- 定义
@used-cols: 6, 4, 3;，循环时加守卫when (index(@used-cols, @n)) - 对断点也做白名单：
@active-breakpoints: sm, lg;，跳过md生成 - 注意
extract()在Less 4.0+才稳定，旧版本需改用get()配合数组索引
复杂点在于，业务组件可能动态引入不同列数需求，这时候就得把@used-cols抽成可配置参数，而不是写死在mixin里。
