如何借助Less的数学函数动态生成CSS多列布局的宽度

应使用 percentage() 函数计算列宽，如 width: percentage(1 / @n)，避免直接写 100% / @n；需注意函数调用格式、外部变量适配、间隙单位统一、响应式断点重算及 calc() 的编译期限制。

用 percentage() 算列宽，别用 100% / @n

Less 里写 width: 100% / @n 看起来简洁，但旧版编译器可能原样输出为 width: 100% / 3，浏览器直接报错不识别。真正安全的做法是调用内置函数：width: percentage(1 / @n)。它强制在编译期算出带单位的字符串，比如 @n: 4 时输出 25%，不是 25.000000% 或其他截断值。

注意两点：一是必须写成 percentage(1 / @n)，不能写成 percentage(1) / @n（后者是除法运算，不是函数调用）；二是如果列数来自外部变量（如栅格系统总列数 @grid-columns: 24），宽度公式得同步适配：flex-basis: percentage(@span / @grid-columns)，否则 .col-3-of-24 会算错。

间隙参与计算时，先用 unit() 统一单位

列之间有 @gap: 1rem，想算净宽就得减掉间隙总和：(100% - (@columns - 1) * @gap) / @columns。但这里 @gap 是带单位的，而 @columns 是纯数字，Less 不允许跨单位除法。错误写法：width: (100% - (@n - 1) * @gap) / @n —— 编译失败。

正确做法分两步：先把间隙转成像素或百分比单位，再参与运算。例如：@gap-px: unit(@gap, px)，然后 width: (100% - (@n - 1) * @gap-px) / @n。若用 rem，确保根字号固定，否则 1rem 在不同设备上像素值浮动，导致布局失准。

立即学习“前端免费学习笔记（深入）”；

响应式断点里必须重算列宽，不能复用默认值

你在 @sm: 576px 下设了 @cols: 3，到了 @md: 768px 改成 @cols: 4，那所有对应类（比如 .col-md-2）的宽度就不能沿用 percentage(1 / 3)，必须重新算 percentage(2 / 4)。常见错误是只改列数变量，却忘了在媒体查询块里调用新宽度计算逻辑。

推荐封装一个带校验的混入：.media-up(@size) when (isunit(@size, px)) { @media (min-width: @size) { @content; } }，调用时 .media-up(@md) { width: percentage(1 / 4); }。断点变量定义必须带单位：@md: 768px;，引用时用 @{md}，否则 @media (min-width: @md) 会输出无效的 @media (min-width: 768)。

别指望 calc() 在 Less 里做动态运算

写 width: calc(100% / @n) 是徒劳的——Less 会尝试在编译期执行这个除法，但 calc() 是浏览器运行时函数，两者阶段错位。更糟的是，某些版本会把 @n 当字符串拼进去，生成 calc(100% / 3)，虽然能跑，但小数截断会导致 12 列加起来不足 100%，最后一列掉行。

真要保留 calc()（比如需兼容旧浏览器或配合 JS 动态调整），必须用转义语法：width: ~"calc(100% / @{n})"。但注意：这仅适用于固定列数场景，一旦列数随容器宽度实时变化，就得交给 column-count 或 grid-template-columns: repeat(auto-fit, minmax(...)) —— Less 的数学函数管不了运行时。

最易被忽略的一点：所有这些计算都固化在 CSS 文件里，改了 @cols 就得重新编译 Less；而“列数随视口宽度连续变化”这种需求，Less 根本无能为力。