Less无法用变量控制repeat()重复次数是CSS规范与编译机制的硬限制；正确做法是用auto-fit+minmax()实现自适应列宽，必要时用JS动态设置。
Less 无法让变量直接控制 repeat() 的重复次数参数——这不是写法问题，是 CSS 规范和 Less 编译机制共同决定的硬限制。你真正能控制的，只有 minmax() 里的最小宽度、gap、box-sizing 等协同属性。
为什么 repeat(@n, 1fr) 在 Less 中不生效
Less 编译时不会把变量代入 repeat() 的第一个参数位置并生成有效 CSS；浏览器解析时也拒绝接受非字面量数字作为 repeat() 的重复次数。即使你写成 .grid-cols(@n) { grid-template-columns: repeat(@n, 1fr); }，编译结果仍是无效语法，整条规则被丢弃。
常见错误现象：
-
repeat(var(--cols), 1fr)在纯 CSS 中静默失效（Computed 面板里grid-template-columns为空） -
@n: 3; grid-template-columns: repeat(@n, 1fr);编译后输出repeat(3, 1fr)看似可行，但一旦加条件判断或单位运算（如@n - 1），就立刻报错或失真 - 用字符串拼接
~"repeat(@{n}, 1fr)"，变量不展开、类型不校验、无法参与数学运算
Less 封装 grid-template-columns 的正确路径
核心思路：放弃“控制列数”，转为“控制列宽阈值”，让 auto-fit 和 minmax() 承担自适应逻辑。所有计算必须在 mixin 参数或守卫中完成，而非字符串拼接。
立即学习“前端免费学习笔记（深入）”；
推荐封装方式：
- 定义带默认值的 mixin：
.grid-cols(@min: 250px, @gap: 1rem) { grid-template-columns: repeat(auto-fit, minmax(@min, 1fr)); gap: @gap; box-sizing: border-box; } - 调用时只需改参数：
.main-grid { .grid-cols(280px, 1.2rem); } - 需要响应式断点？用递归循环生成媒体查询类，例如
.grid-cols-sm(@min)+@media (max-width: 768px)块内再调一次 mixin - IE10/11 兼容需手动加前缀：
-ms-grid-columns: (100% / 12) * 1;（用循环生成固定列数，无法支持 auto-fit）
什么时候必须用 JS 动态设置列数
当你明确要求「就是 N 列」，且该 N 来自运行时变量（比如用户设置、API 返回、URL 参数），那 Less 和纯 CSS 都无能为力，只能靠 JS。
关键实操点：
- 读变量：
const n = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()); - 写样式：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;（注意：内联样式优先级高于 CSS 规则） - 避免高频触发重排：不要在 scroll 或 resize 中直接设，可用防抖或只在初始化/变量变更时更新
- 多个容器共用？封装函数：
setGridCols(el, '--cols')，别重复查getComputedStyle
真正容易被忽略的是：auto-fit 和 auto-fill 的行为差异会直接影响视觉结果——前者折叠空轨道，后者保留，哪怕没内容也会占位。如果你用 auto-fill 却期望“填满容器不留白”，就会一直对不齐。这个细节不看 Computed 面板很难发现。
