less无法实现css grid动态列数，因repeat()首参数必须为字面量数字；正确方案是用auto-fit+minmax()封装mixin，或交由js在运行时设置。
Less 本身不能生成真正的 CSS Grid 动态列数（比如 repeat(@n, 1fr)），这是 CSS 规范和 Less 编译机制共同决定的硬限制——变量无法代入 repeat() 的第一个参数位置，浏览器会直接丢弃整条规则。
为什么 repeat(@n, 1fr) 在 Less 中无效
常见错误写法：.grid-cols(@n) { grid-template-columns: repeat(@n, 1fr); }。编译后看似输出 repeat(3, 1fr)，但只要 @n 来自计算（如 @n: @cols - 1）或条件分支，就会报错或静默失效。更隐蔽的问题是：即使编译成功，CSS 运行时也不接受变量形式的重复次数，repeat() 第一个参数必须是字面量数字或 auto-fit/auto-fill。
-
repeat(var(--cols), 1fr)在纯 CSS 中完全不生效（Computed 面板里该属性为空） -
~"repeat(@{n}, 1fr)"是字符串拼接，变量虽展开但类型不校验，无法参与数学运算，且出错时只报模糊的Parse error - 试图用
percentage()或unit()强转也不会改变本质——repeat()不吃编译期算出来的数值
正确路径：用 auto-fit + minmax() 封装可调参数的 mixin
放弃控制“列数”，转而控制“单列最小宽度”和“间隙”，让浏览器在运行时自动计算列数。这才是 Less 能可靠介入的环节。
- 定义带默认值的 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); }，无需改动类名或重写规则 - 需要 IE10/11 兼容？得额外加
-ms-grid-columns前缀，但它不支持auto-fit，只能退化为固定列数（需配合递归 mixin 生成，如(100% / @n) * 1） - 别把 mixin 套在每个卡片上——每次调用都会生成一套完整规则，CSS 体积会线性膨胀
响应式断点类必须手动展开，不能嵌套在 @media 里调用递归 mixin
Less 的作用域规则导致：若在 @media 块内直接调用未在此作用域定义的递归 mixin（如 .make-grid-columns()），会报 Undefined mixin，而不是变量未定义。
- 安全做法是先定义断点变量：
@sm-min: 576px;、@md-min: 768px; - 再封装断点专用 mixin：
.grid-cols-sm(@min, @gap) { @media (min-width: @sm-min) { .grid-cols(@min, @gap); } } - 显式调用：
.grid-cols-sm(240px, 0.8rem);—— 注意：.grid-cols()必须已在全局作用域定义，否则此处调用失败 - 波浪号
~""仅用于媒体查询字符串插值（如~"(min-width: @{sm-min})"），漏掉会导致语法错误
真要动态列数？只能交给 JS
当你明确要求「就是 N 列」，且 N 来自运行时（用户设置、API 返回、URL 参数），Less 和纯 CSS 都无能为力。
- 读取 CSS 变量：
const n = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()); - 写入内联样式：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;（注意：内联样式优先级高于 CSS 规则） - 避免在
scroll或resize中高频触发——用防抖，或只在初始化/变量变更时更新 - 别指望 Less 编译期能预测运行时数据；混淆编译期和运行时，是这类问题最根本的陷阱
真正容易被忽略的是：所有“自动化”都建立在参数固化前提下。Less 没有运行时，它只展开你写死的逻辑。所谓“生成器”，其实是把人工计算过程提前到编译期完成，而不是赋予 CSS 动态能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
