percentage(1 / @n) 是唯一安全的写法，因其在编译期生成带%的字符串（如8.33333333%），避免旧版less预计算calc导致的小数截断、布局错乱等问题。
直接用 percentage(1 / @n)，别碰 calc(100% / @n) —— 后者在旧版 Less 里会预计算成多位小数字符串，浏览器 layout 阶段一截断，12 列加起来就不到 100%，最后一列必然掉行。
为什么 percentage(1 / @n) 是唯一安全的写法
Less 的 percentage() 函数专为编译期百分比生成设计，它把小数转成带 % 的字符串（比如 percentage(1 / 12) → 8.33333333%），CSS 解析器能原样接收。而 100% / @n 不加函数包裹，Less 默认不求值，可能直接输出 100% / 12，浏览器不认识；calc(100% / @n) 在变量参与时旧版 Less 会报 “Operation on an invalid type”，且就算编译成功，也会变成 calc(33.333333%) 这类字面量，小数位数越多，截断风险越高。
-
percentage(1 / @n)是函数调用，必须带括号；写成percentage(1) / @n就是除法，结果是100 / @n，没单位也不合法 - 如果列数来自变量（如
@grid-columns: 24），必须用percentage(1 / @grid-columns)，不能硬写死percentage(1 / 12) - 需要多列宽（如 span=3），先算单列基准：
@col-width: percentage(1 / @grid-columns);，再拼：width: ~"(@{col-width} * 3)";
间隙（gutter）怎么参与列宽计算
间隙不能直接从百分比里减，因为 100% - 20px 这种跨单位运算 Less 直接报错。要么把 gutter 定义为无单位小数（如 @gutter: 0.016666;），然后写 ((1 - @gutter * 2) / 3) * 100%；要么用 calc() 交由浏览器运行时算：width: calc(@{col-width} - var(--gutter, 1rem));，但注意 calc() 内部不能放 Less 变量，得先算好再塞进去：@gap-2x: @gap * 2;，再 calc(~"100% - @{gap-2x}")。
- gap 统一用
rem或px，别混用；若用rem，确保根字体大小稳定，否则响应式失准 - 容器必须设
box-sizing: border-box，否则 padding 会撑破你算好的百分比宽度 - 不要在百分比表达式里硬减像素值，例如
(100% - 1rem) / 3看似合理，但 Less 编译失败
响应式断点里列宽必须重算
每个媒体查询里都要重新调用 percentage()，不能复用默认值。比如中屏 @grid-columns-md: 12，大屏 @grid-columns-lg: 24，那 .col-lg-4 的宽度就得是 percentage(4 / @grid-columns-lg)，而不是沿用 percentage(4 / @grid-columns-md)。
- 断点变量必须带单位：
@sm: 576px;，引用时用@{sm}；写成@media (min-width: @sm)会编译成无效 CSS - 推荐封装守卫 mixin：
.media-up(@size) when (isunit(@size, px)) { @media (min-width: @size) { @content; } }，避免单位校验遗漏 -
.when是编译期判断，无法读取视口宽度；& when (@screen > 768px)这类写法完全无效，Less 没有运行时@screen变量
所有这些计算都发生在编译阶段——你改了 @grid-columns，就得重新编译 Less 文件；真正需要随容器宽度实时变化的列数（比如 repeat(auto-fit, minmax())），Less 根本不处理，那是 CSS Grid 或 column-count 的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
