直接用 percentage() 在编译期算出精确百分比值更可靠，因 calc(100% / @n) 在旧版 Less 中会预计算为多位小数字符串，浏览器截断导致总宽不足100%，且变量参与时会报错；必须改用 percentage(1 / @n)。
直接用 percentage() 在编译期算出精确百分比值，比写 calc(100% / @n) 更可靠——后者在旧版 Less 里会预计算成带多位小数的字面量，浏览器渲染时截断导致总宽度不足 100%，最后一列换行或出现间隙。
为什么 calc(100% / @n) 在 Less 中不能用于栅格列宽
Less 会尝试在编译阶段求值 calc(100% / @n)，结果可能是 calc(33.333333%) 这种字符串。但多位小数在浏览器 layout 阶段被截断，12 个 .col-1 加起来可能只有 99.999%，触发换行。更关键的是，当 @n 是变量（如 @grid-columns）而非字面量时，旧版 Less 直接报错 “Operation on an invalid type”。
- 必须改用
percentage(1 / @n)：它返回字符串"8.333333%"，可安全拼进 CSS 值中 - 别写
percentage(@i / @n)算多列宽，先算单列基准：@col-width: percentage(1 / @grid-columns);，再乘倍数：width: ~"(@{col-width} * @{span})"; - 若需扣 gutter，别在百分比里硬减；用
calc()交由浏览器运行时算：width: calc(@{col-width} - var(--gutter, 1rem));
如何用递归 mixin 正确生成 .col-1 到 .col-12
Less 没有 @for，所谓“循环”本质是带守卫条件的递归调用。漏掉终止判断或参数传错，就会无限递归或只生成一个类。
- 定义时用
when (@n > 0)控制出口，不是=或<=，防整数精度偏差 - 每次递归必须显式传参：
.make-col((@n - 1), @grid-columns)，不能依赖外部变量@n - 类名拼接用
.col-@{n}（注意花括号），不是.col-@n（会被当变量解析） - 入口调用写成
.make-col(@grid-columns, @grid-columns)，确保从最大列数开始
响应式断点与列数如何联动不翻车
把断点写死、列数写死，改一处就得全局搜三遍。关键是让每个断点拥有独立列数变量，并用 .each()（Less 4.0+）或手动 extract() 遍历断点 map。
立即学习“前端免费学习笔记（深入）”；
- 断点变量必须带单位：
@sm: 576px;，引用时用@{sm}，否则@media (min-width: @sm)编译失败 - 列数按断点拆开：
@grid-columns-sm: 12;@grid-columns-md: 16;，避免全项目强耦合 - 用
.each(@breakpoints, { })遍历，内部再调一次列循环；不要嵌套两层.each()，旧版 Less 容易崩 - 媒体查询内重算宽度：
@media (min-width: @{sm}) { .col-sm-4 { width: percentage(4 / @grid-columns-sm); } }
.offset-* 类为什么没效果
偏移类本质是 margin-left，它不改变定位方式。如果父容器没启用浮动或 Flex 布局，偏移会失效或引发换行。
- 生成的
.offset-3只设置margin-left: percentage(3 / @columns)，不会自动触发 float 或 flex - 必须确保父容器有
display: flex或overflow: hidden+float清除逻辑 - 类名拼接要支持断点：
.offset-sm-3需在对应@media内生成，且基于@grid-columns-sm计算 - 递归生成 offset 时，
@i应从 1 开始，上限设为@columns - 1（满偏移通常不用）
最容易被忽略的是：所有计算都发生在编译期，percentage() 输出的是静态字符串，不是运行时响应逻辑；一旦你指望它随视口变化自动重算，就走错了方向。
