less中响应式列宽需用.map+ .each()配合命名参数展开断点与列数，避免@for误用；calc()内除法须用percentage()防预计算；媒体查询需统一用.media-up() mixin封装带单位变量。
Less里用循环生成响应式列宽为什么总出错
因为.each()和@for在Less中行为完全不同，且不支持动态计算类名拼接——你写的@for循环看似在遍历断点，实际编译时根本不会生成对应CSS规则，只产出最后一组值。
- Less没有运行时逻辑，所有循环必须在编译期展开，
@for只能用于数字序列，不能遍历map或断点对象 - 想按
sm/md/lg生成不同列宽？得用.each()配合extract()和length()手动模拟，但语法极其脆弱 - 常见错误：写
.col-@{bp}-@{n}期望生成.col-sm-2，结果编译报错“variable @bp is undefined”——因为变量作用域没穿透进循环体
用map + .each()封装响应式列表列宽的正确姿势
核心是把断点和列数定义成map，再用.each()逐项展开。Less 4.0+才真正支持带命名参数的.each()，旧版本必须用get() + length()硬写。
- 定义断点map：
@breakpoints: sm 576px, md 768px, lg 992px, xl 1200px; - 定义列数map：
@cols: 1 2 3 4 6 12;（对应1列到12列） - 关键写法：
.each(@breakpoints, {.col-@{key}-@{value} { flex: 0 0 calc((100% / @value) - var(--gutter, 1rem)); } });——注意@key是断点名，@value是像素值，列数得另套一层循环 - 真实项目中建议拆成两层：
.make-col-grid()处理列数，.make-responsive-cols()套断点，否则嵌套太深易崩
calc()里的除法为什么在Less里总算不准
Less会提前计算calc(100% / 3)变成calc(33.333333%)，但浏览器渲染时小数截断导致12列加起来不到100%，出现换行或间隙。
- 必须写成
calc(100% / @{n})让@{n}保持为变量，避免Less预计算 - 但
@{n}必须是数字字面量（如3），不能是表达式（如@cols[2]），否则编译失败 - 更稳方案：用
percentage(1 / @n)函数，它返回字符串"33.333333%"，再拼进calc()里，例如：calc(@{pct} - var(--gutter))，其中@pct: percentage(1 / @n); - 别信网上“
100% / @n * 1就能防预计算”的说法——Less 4.2+已修复该hack，现在直接报错
移动端优先下，min-width媒体查询怎么和Less变量联动
直接写@media (min-width: @sm)会报错，因为Less不认单位混用；写@media (min-width: @{sm})又容易漏掉单位，导致生成@media (min-width: 576)这种无效查询。
- 断点变量必须带单位：
@sm: 576px;，且所有引用都用@{sm}包裹 - 为防手误，建议统一用
.media-up(@size)mixin：.media-up(@size) { @media (min-width: @{size}) { @content(); } }，调用时.media-up(@md) { .col-md-3 { ... } } - 注意：Less的
@content不支持嵌套媒体查询，所以.media-up(@md) { .media-down(@sm) { ... } }会失效——得把.media-down提一级 - 真要兼容IE11？放弃
calc()，改用width: ~"calc(100% / @{n})"强制字符串输出，再靠JS补全单位（但这就超出Less范畴了）
最麻烦的不是语法，是当你改了一个断点数值，要同步更新四五个地方的map、循环、mixin和媒体查询——变量命名稍不一致，编译就静默跳过某段，最后页面在iPad上错一列，还查不出哪行代码没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
