Less无法自动平衡多栏高度，但可通过变量精准控制列宽比例：用@columns定义总栏数，结合calc()和运算式（如(100% - (@columns - 1) * @gap) / @columns）动态计算净宽，并通过mixin封装响应式列布局，支持断点切换栏数。
Less中用变量控制多栏布局的列宽比例
直接说结论：Less本身不提供“自动平衡”多栏内容高度的能力（那是CSS column-fill 或 JS 的事），但完全可以用变量 + 运算精准控制每栏宽度占比，避免硬编码、提升复用性。
关键不是“平衡”，而是“可维护的列宽计算”——比如 3 栏等宽、2-1 分配、响应式动态调整，都靠变量驱动。
-
@columns: 3定义总栏数，后续所有宽度基于它推导 - 单栏基础宽度写成
calc(100% / @columns)，Less会编译为具体数值（如33.333333%） - 若需留间隙，用
@gap: 1rem，再通过(100% - (@columns - 1) * @gap) / @columns算净宽 - 注意：Less除法默认转成 CSS 除法（
calc()），不会提前求值；如需预计算，得用括号包裹并加单位，例如(100% / @columns)是安全的，但100% / @columns（无括号）可能被误解析
响应式场景下如何用变量切换列数并重算宽度
不能只写一套 @columns: 3 就完事。真实项目里，移动端常是 1 栏，平板 2 栏，桌面 3–4 栏——这时要配合媒体查询和变量作用域。
Less 不支持运行时变量重赋值，所以得用「嵌套规则 + 局部变量」或「mixin 参数化」来隔离不同断点下的计算逻辑。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：用 mixin 封装列布局，参数为
@n（栏数）和@gap（间隙） - 示例：
.cols(@n, @gap: 0.5rem) { column-count: @n; column-gap: @gap; & > * { break-inside: avoid; width: (100% - (@n - 1) * @gap) / @n; } } - 调用：
.cols(3);编译出 3 栏带间隙的规则；@media (max-width: 768px) { .cols(1); }切换为单栏 - ⚠️ 坑：不要在媒体查询外直接给
@columns重新赋值——Less 变量是静态作用域，后赋值不会覆盖前面的引用
为什么不用 flex 或 grid？Less变量在这类布局里还有价值吗
有。当你要生成大量相似但列数/比例不同的组件（比如仪表盘卡片组、文章摘要列表、多尺寸广告位），用 Less 变量驱动比手写多套 grid-template-columns 更可靠。
尤其适合设计系统中「原子级栅格工具类」的生成，例如：.col-2-of-5、.col-3-of-8 这类类名，背后就是变量循环 + 字符串拼接（用 ~".col-@{i}-of-@{n}"）。
- Less 循环（
.make-cols-loop(@n, @i: 1) when (@i =）能批量产出比例类，避免手动写 20 行 - 注意：循环中用
percentage((@i * 1.0) / @n)确保结果带%单位，否则编译失败 - Flex/Grid 本身不解决“如何管理几十种比例组合”的问题，而 Less 变量 + 循环正好补上这一环
真正容易被忽略的是列内内容溢出行为——column-width 是建议值，浏览器可能无视；而 column-count 才强制分栏。用变量算宽时，务必配合 column-count 使用，否则响应式下容易出现“看起来是 2 栏，实际渲染成 1 栏还带横向滚动”的情况。
