不能用变量直接控制repeat()列数，因repeat()首参必须为字面量数字、auto-fit或auto-fill；Less变量在计算或带单位时会报错，CSS变量如var(--cols)在运行时被静默丢弃，Computed面板中该属性为空。
为什么不能用变量直接控制 repeat() 的列数
因为 repeat() 的第一个参数在编译时必须是字面量数字、auto-fit 或 auto-fill，浏览器运行时也不接受 CSS 变量或 Less 变量插值。写成 .grid-cols(@n) { grid-template-columns: repeat(@n, 1fr); } 看似能过编译，但一旦 @n 来自计算（比如 @n - 1）或带单位运算，就会报错或静默失效；更关键的是，repeat(var(--cols), 1fr) 在 DevTools 的 Computed 面板里直接为空——它根本不会生效。
.grid-cols() Mixin 的安全参数设计
放弃“控制列数”，转而控制“单列最小宽度”和“间隙”，让浏览器在运行时自动分配列数。这是 Less 唯一能可靠介入的路径：
-
@min：单列最小宽度（如280px），必须带单位；建议用isunit(@min, px)校验，避免传入无单位数字 -
@gap：网格间隙（如1.2rem），同样需校验单位 - 所有参数都设默认值：
.grid-cols(@min: 250px, @gap: 1rem)，防止漏传导致编译失败 - 别在 mixin 内部写
@media——容易与外层断点嵌套冲突；响应式应在调用处包裹，例如@media (min-width: 768px) { .main-grid { .grid-cols(320px, 1rem); } }
如何生成响应式断点类（如 .grid-sm-6）
Less 没有原生循环，靠递归 mixin + when 守卫模拟。错误做法是硬写字符串拼接或依赖第三方插件；正确路径是手写可控递归：
- 定义带计数器的递归 mixin：
.grid-loop(@n, @i: 1) when (@i = - 调用时明确终止条件：
.grid-loop(6);→ 生成.grid-sm-1到.grid-sm-6 - 注意：
@{i}是变量插值语法，@i只是数值；漏写when守卫会导致无限递归卡死编译 - 生成超过 24 列时务必实测编译耗时——递归层数翻倍，Less 解析时间非线性增长
容易被忽略的体积与作用域陷阱
每次调用 .grid-cols() 都会完整展开一套 CSS 规则，不是复用，而是复制。如果在 20 个组件里各调一次，CSS 体积就膨胀 20 倍。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的是作用域问题：在 @media 块内调用未在全局定义的递归 mixin（比如 .grid-cols-sm()），Less 报的是 Undefined mixin，而不是变量未定义——因为它按作用域链查找 mixin，不是按变量链。这意味着你不能把递归 mixin 定义在某个局部 @media 里再调用，必须提至顶层作用域。
