不能靠 repeat() 动态算列数封装断点，必须用 auto-fit + minmax() 配合显式断点变量和独立 mixin 调用；因 less 编译时无法在 repeat() 内执行运算或条件判断，仅字符串拼接导致解析错误、无效输出或 ie 兼容崩盘。
直接说结论：不能靠 repeat() 动态算列数封装断点，必须用 auto-fit + minmax() 配合显式断点变量 + 独立 mixin 调用 —— 否则编译报错、输出无效、或 IE 兼容性崩盘。
为什么 repeat(@{n}, 1fr) 在断点里会失败
Less 编译时无法在 repeat() 内部执行数学运算或条件判断。哪怕你写 @n: @cols - 1，再传进 repeat(@{n}, 1fr)，结果也只是字符串拼接，不是合法 CSS Grid 值。编译器报的往往是模糊的 Parse error 或静默生成错误规则。
-
~"repeat(@{n}, 1fr)"是字符串，浏览器根本不认 -
percentage()或unit()强转无效 —— 类型不对，repeat()要的是字面量数值或auto-fit这类关键字 - 想用递归 mixin 生成固定列数（如
.grid-cols-3）？它只能在全局作用域定义，不能嵌套在@media块里调用，否则报Undefined mixin
正确封装：用 .grid-cols() + 断点 mixin 分离控制
放弃“控制列数”，转向“控制单列最小宽度”——这是 Less 能稳稳介入的环节，且天然兼容移动优先和浏览器运行时计算。
- 先定义基础 mixin：
.grid-cols(@min: 250px, @gap: 1rem) { grid-template-columns: repeat(auto-fit, minmax(@min, 1fr)); gap: @gap; } - 断点变量单独定义（必须带单位）：
@breakpoint-md: 768px;、@breakpoint-lg: 992px; - 再封装断点专用调用：
.grid-cols-md(@min, @gap) { @media (min-width: @breakpoint-md) { .grid-cols(@min, @gap); } } - 使用时显式调用：
.main-grid { .grid-cols-md(280px, 1.2rem); }—— 注意：.grid-cols()必须已在全局定义，否则此处失效
IE10/11 兼容要手动降级，不能混用
IE 完全不支持 auto-fit，minmax() 也仅部分支持。强行加 -ms-grid-columns 前缀不会自动降级，必须另起一套逻辑。
- 别指望一个 mixin 同时输出现代 Grid 和 IE Grid —— 浏览器解析规则完全不同，CSS 会互相覆盖或忽略
- 安全做法是分文件：
grid-modern.less用auto-fit，grid-ie.less用递归 mixin 生成固定列宽（如-ms-grid-columns: (100% / 12) * 3;） - 通过
feature queries或构建时条件注入，而不是让 Less 编译器去猜哪个该生效 - 如果项目仍需支持 IE，
.grid-cols()的参数就得限制为像素值（不能用em或百分比），否则 IE 解析出错
容易被忽略的体积与作用域陷阱
每次调用 .grid-cols()，Less 都会完整复制一遍规则体。如果你在 10 个组件里各调一次，CSS 体积就膨胀 10 倍 —— 不是复用，是复制。
- 不要把
.grid-cols()套在每个卡片选择器上，而是统一用一个语义类（如.grid-layout）承载，再通过断点 mixin 控制其响应行为 -
@media块内不能直接调用未在此作用域定义的 mixin，哪怕它在别的文件里 —— Less 作用域是静态的，不是运行时查找 - Webpack 项目中若用
less-loader的modifyVars注入主题，可能意外覆盖你本地的@breakpoint-*变量，导致断点失效却无报错 —— 检查变量注入顺序，优先级低于本地定义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
