百分比浮动列抖动源于Less预计算calc导致浮点误差，解法是用percentage(1/@n)生成精确字符串；递归mixin需守卫@n>0、显式传参、花括号拼类名；响应式须按断点分设列数并重算width。
百分比浮动列的“抖”不是动画抖动，而是因浮点误差导致的列宽总和不足 100%、最后一列换行或出现间隙——这在旧版 Less 编译 + 浮动布局中尤为典型。根本解法不是调样式，是掐断误差源头。
为什么 calc(100% / @n) 在 Less 中会引发列宽抖动
Less（尤其 3.x）遇到 calc(100% / @n) 会尝试预计算：比如 @n: 12 时生成 calc(8.3333333333%)。浏览器 layout 阶段对这个字符串做浮点截断（如保留 5 位小数），12 个 8.33333% 加起来只有 99.99996%，触发换行。
更糟的是，当 @n 是变量（如 @grid-columns）而非字面量时，旧版 Less 直接报错 Operation on an invalid type，编译失败。
- 必须用
percentage(1 / @n)：它在编译期返回精确字符串"8.333333%"，不带 calc 包裹，无运行时截断风险 - 别写
percentage(@i / @n)算多列宽——先算单列基准：@col-width: percentage(1 / @grid-columns);，再拼：width: ~"(@{col-width} * @{span})"; - 若需扣 gutter，别在百分比里硬减（如
width: calc(@{col-width} - 1rem)错误），改用calc()交由浏览器运行时算：width: calc(@{col-width} - var(--gutter, 1rem));
递归 mixin 生成 .col-1 到 .col-12 时如何避免漏类或无限循环
Less 没有 @for，所谓“循环”本质是带守卫的递归调用。常见错误是守卫条件写成 when (@n = 1) 或 when (@n ，因整数精度偏差或初始值传错，导致只生成一个类或卡死编译。
立即学习“前端免费学习笔记（深入）”；
- 守卫必须用
when (@n > 0)，这是最安全的出口判断 - 每次递归必须显式传参：
.make-col((@n - 1), @grid-columns)，不能依赖外部变量@n（它不会自动更新） - 类名拼接必须加花括号：
.col-@{n}，写成.col-@n会被解析为变量@n而非字符串 - 入口调用写成
.make-col(@grid-columns, @grid-columns)，确保从最大列数开始递归，覆盖全部范围
响应式断点中浮动列如何保持各断点列宽严格对齐
把 @grid-columns 写死在全局，再用媒体查询覆盖宽度，改一处就得搜三遍——且不同断点列数变化时，percentage(1 / @grid-columns) 若没重算，就会复用旧值，导致 sm 断点用 12 列算出的宽度套在 md 的 16 列容器里，列宽错乱。
- 断点变量必须带单位：
@sm: 576px;，引用时用@{sm}，否则@media (min-width: @sm)编译失败 - 列数按断点拆开定义：
@grid-columns-sm: 12;、@grid-columns-md: 16;，解除全局耦合 - 用
.each(@breakpoints, { })（Less 4.0+）遍历断点 map，内部再调一次列循环；避免嵌套两层.each()，旧版 Less 容易崩 - 媒体查询内必须重算宽度：
@media (min-width: @{sm}) { .col-sm-4 { width: percentage(4 / @grid-columns-sm); } }
真正难的不是写对一行 percentage()，而是在整个栅格系统里让所有变量、作用域、编译时机都对齐——尤其是当你在旧项目里维护一套基于浮动的 Bootstrap 3 风格栅格时，少一个花括号、多一个空格，都可能让第 12 列在 Safari 14 下悄悄换行。
