Less无法动态控制repeat()的重复次数，应改用auto-fit+minmax()封装mixin，通过参数驱动单列最小宽度和间隙，由浏览器运行时自动计算列数。
Less 不能动态控制 repeat() 的重复次数，这是 CSS 规范和编译机制的硬限制；真正可行的路径是用 auto-fit + minmax() 封装 mixin，靠参数驱动列宽阈值，而非列数。
为什么 repeat(@n, 1fr) 在 Less 中不可靠
常见错误是定义 .grid-cols(@n) { grid-template-columns: repeat(@n, 1fr); }，看似能编译出 repeat(4, 1fr)，但只要 @n 来自计算（比如 @n: @base - 1）或条件分支，就会报错或静默失效。更关键的是：浏览器只接受字面量数字或 auto-fit/auto-fill 作为 repeat() 第一个参数，变量形式会被整条规则丢弃。
典型现象：grid-template-columns 在开发者工具的 Computed 面板中为空，布局完全塌陷。
-
repeat(var(--cols), 1fr)在纯 CSS 中无效，Less 编译后也一样 -
~"repeat(@{n}, 1fr)"虽能拼出字符串，但无法参与单位运算（如@min - 2px），且错误提示模糊（仅Parse error） - 试图用
unit()或percentage()强转数值，改变不了浏览器拒绝解析的本质
用 .grid-cols() mixin 控制最小宽度和间隙
放弃“控制列数”，转为“控制单列最小宽度”和“间隙”，让浏览器在运行时自动算列数——这才是 Less 能稳定介入的环节。
推荐封装：
.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); } -
@min决定单列最小宽度，1fr部分负责剩余空间分配，auto-fit确保空轨道不占位 - 所有计算必须在 mixin 参数或守卫中完成，例如加类型校验：
.grid-cols(@min) when (isnumber(@min)) { ... } - 避免在 mixin 内部写
@media—— 容易与外层断点嵌套冲突，应在调用处包裹
响应式断点要显式展开，别依赖作用域重定义
不要写 @grid-base: 4; @media (min-width: 768px) { @grid-base: 8; } 这类代码——Less 变量是编译时求值，每个 @media 块内其实是独立作用域，@grid-base 并非全局更新，新手容易误以为它像 JS 那样“动态赋值”。
安全做法是先定义断点变量，再封装专用 mixin：
@sm-min: 576px;
@md-min: 768px;
<p>.grid-cols-sm(@min, @gap) {
@media (min-width: @sm-min) {
.grid-cols(@min, @gap);
}
}</p><p>.grid-cols-md(@min, @gap) {
@media (min-width: @md-min) {
.grid-cols(@min, @gap);
}
}</p>
- 调用：
.main-grid { .grid-cols(240px, 0.8rem); .grid-cols-sm(260px, 1rem); .grid-cols-md(280px, 1.2rem); } - 注意：
.grid-cols()必须已在全局作用域定义，否则断点 mixin 内调用会报Undefined mixin - IE10/11 兼容需额外加
-ms-grid-columns前缀，但它不支持auto-fit，只能退化为固定列数（需用递归循环生成）
最常被忽略的一点：mixin 每次调用都会生成一套完整 CSS 规则，如果给每个卡片都套一层 .grid-cols()，体积会线性膨胀。应只对核心容器（如 .main-grid、.section-layout）使用，卡片层级用 grid-column / grid-row 等项目属性控制位置即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
