percentage(1 / @n) 是唯一能安全生成精确百分比的 less 函数，避免 calc() 预计算截断和旧版 less 对变量运算报错，配合变量可生成响应式栅格类并需结合 box-sizing: border-box 使用。
直接用 percentage() 在编译期算出精确百分比值，比手写小数或依赖 calc() 更可靠——后者在旧版 Less 中会预计算成多位小数字符串，浏览器截断导致总宽不足 100%，最后一列换行或出现间隙。
为什么不能写 calc(100% / @n) 算列宽
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)); -
percentage(1 / @n)是唯一能安全生成精确百分比的 Less 函数；100% / @n可能原样输出为100% / 3，浏览器不认
如何用 percentage() 配合变量生成响应式栅格类
栅格系统常需按列数均分 100%，手写 width: 8.33333333% 既难维护又易出错，而 percentage() 能在编译期直接输出精确值。
-
percentage(1 / 12)→8.33333333%，适合生成.col-1-of-12类 - 若列数存于变量
@cols: 12，务必写成percentage(1 / @cols)，不能省略括号 - 递归 mixin 中每轮调用必须显式传参：
.make-col((@n - 1), @grid-columns)，不能依赖外部变量@n - 类名拼接用
.col-@{n}（注意花括号），不是.col-@n（会被当变量解析）
断点与 percentage() 如何联动不翻车
响应式列宽切换必须靠媒体查询，不能依赖 .when —— Less 的 .when 是编译期条件分支，无法响应屏幕宽度变化。
- 断点变量必须带单位：
@sm: 576px;，引用时用@{sm}，否则@media (min-width: @sm)编译失败 - 列数按断点拆开：
@grid-columns-sm: 12;、@grid-columns-md: 16;，避免全项目强耦合 - 用
.each(@breakpoints, { })遍历断点 map，内部再调一次列循环；不要嵌套两层.each()，旧版 Less 容易崩 - 移动端慎用
rem参与百分比计算：根字体大小不确定时，1rem对应像素值浮动，会导致布局失准
最容易被忽略的是：所有这些百分比计算都发生在编译期，不是浏览器运行时；容器必须设 box-sizing: border-box，否则 padding 会撑破你算好的 percentage() 宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
