直接用 percentage() 配合递归循环生成栅格类更可靠，因宽度在编译期固化为精确百分比字符串，避免浏览器小数截断导致换行或间隙；calc(100% / @n) 在 less 中不可靠，因预计算产生多位小数或报错，应改用 percentage(1 / @n)。
直接用 percentage() 配合递归循环生成栅格类，比硬写 calc() 更可靠——因为所有宽度值都在编译期固化为精确百分比字符串，避免浏览器小数截断导致的换行或间隙。
为什么 calc(100% / @n) 在 Less 中不可靠
Less 会尝试预计算这个表达式，结果可能是 calc(33.333333%) 这种字面量，但多位小数在浏览器渲染时被截断，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 布局，margin-left 只会把元素往右推，但可能引发换行或脱离预期流。
- Offset 必须配合布局上下文：父级设
display: flex或overflow: hidden+ 子项float: left - 百分比计算必须用
percentage(@i / @columns)，不能写@i * 1%或(@i / @columns) * 100%，Less 不支持变量参与单位运算 -
@i从 1 开始循环（.offset-0无意义），上限设为@columns - 1（满偏移通常不用） - 递归生成 offset 的 mixin 终止条件要和列循环一致，否则容易漏掉或重复生成
最常被忽略的一点：所有栅格类的容器都得设 box-sizing: border-box，否则 padding 会撑破你精心算好的 percentage() 宽度；而 gutter 如果用 rem 定义，根字体大小一变，整个流式布局就偏了——所以 gutter 推荐用 px 或固定 rem 值，别依赖动态计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
