less无法用变量控制repeat()列数，因编译时变量不能代入repeat()首参数，浏览器运行时也仅接受字面量数字或auto-fit/auto-fill；正确做法是封装.grid-cols(@min, @gap) mixin，用auto-fit+minmax()让浏览器自动计算列数。
为什么不能直接用变量控制 repeat() 的列数
Less 编译时无法把变量代入 repeat() 的第一个参数位置，比如 .grid-cols(@n) { grid-template-columns: repeat(@n, 1fr); } 看似能编译，但只要 @n 来自计算、条件或单位运算（如 @n - 1），就会报错或静默失效。浏览器运行时也只接受字面量数字或 auto-fit/auto-fill，repeat(var(--cols), 1fr) 在 Computed 面板里直接为空。
正确封装 .grid-cols() Mixin 的参数设计
放弃控制“列数”，转而控制“单列最小宽度”和“间隙”，让浏览器在运行时自动分配列数。这是 Less 能可靠介入的唯一路径：
-
@min：单列最小宽度（如250px），必须带单位，建议用isunit(@min, px)或isnumber(@min)校验 -
@gap：网格间隙（如1rem），同样需校验单位 - 所有参数都设默认值：
.grid-cols(@min: 250px, @gap: 1rem)，避免调用时漏传导致编译失败 - 别在 mixin 内部写
@media—— 容易与外层断点嵌套冲突；响应式应在外层包裹调用
示例：
.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 或 minmax()，只能退化为固定列数，且语法是 (100% / @n) * 1 这种乘法形式：
- 必须用递归 mixin 生成，不能硬写字符串拼接
- 需要额外定义
@ie-cols: 12这类变量，与主 mixin 参数解耦 - 前缀规则要单独包裹：
-ms-grid-columns: (100% / @ie-cols) * 1; - 注意：IE 模式下
gap无效，得靠 padding 模拟栅格间距
容易被忽略的体积与作用域问题
每次调用 .grid-cols() 都会完整展开一套 CSS 规则，不是复用，而是复制。如果在 20 个组件里各调一次，CSS 体积就膨胀 20 倍。
更隐蔽的是作用域陷阱：在 @media 块内调用未在全局定义的递归 mixin（比如生成断点类的 .grid-cols-sm()），会报 Undefined mixin，而不是变量未定义 —— 因为 Less 查找 mixin 是按作用域链，不是按变量链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
