利用Less数学函数动态生成CSS多列布局宽度
来源：互联网 2026-06-24 08:32:20在Less中计算多列宽度应使用`percentage(1/@n)`而非除法以避免编译错误；间隙参与运算需用`unit()`统一单位；响应式断点内必须重算列宽；`calc()`无法动态计算，建议使用转义语法或改用CSS网格布局。
在Less里处理多列布局的宽度，有一个常见但容易被忽略的陷阱，今天专门来梳理一下。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
用 percentage() 算列宽，别用 100% / @n
常见做法是直接写 width: 100% / @n，看起来简洁，但旧版编译器遇到这种写法时，可能会原封不动地输出 width: 100% / 3，浏览器无法识别并直接报错。稳妥的做法是调用内置函数：width: percentage(1 / @n)。这个函数强制在编译期计算出带单位的字符串，例如当 @n: 4 时，输出为 25%，干净利落，不会出现意外的截断。
这里有两个细节需要留意。第一，必须写成 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 里做动态运算
另一个容易踩的坑：指望 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 本身无法处理。