less 4.x 默认不支持无括号的 grid 数学表达式，因严格数学模式要求所有除法/乘法必须显式括号，否则报 operation on an invalid type；repeat(@n, 1fr) 失效主因是 @n 含未括号运算或非字面量，而非 grid 语法本身问题。
Less 4.x 默认不支持无括号的 Grid 数学表达式
Less 本身不“识别”或“拒绝”CSS Grid 语法，真正报错的往往是 Grid 相关声明里混入了未加括号的数学运算——比如 grid-template-columns: repeat(@n, 1fr); 看似合法，但一旦 @n 是通过计算得来（如 @n: @cols / 2;），Less 4.x 就会因严格数学模式直接中断编译。
这不是 Grid 语法问题，是 Less 解析器在处理变量参与的算术表达式时的行为变更。旧版（3.x）允许 100px - 20px / 2 这类写法，新版默认要求所有除法/乘法必须显式括号，否则抛出 Operation on an invalid type。
- 典型触发场景：
@gap: 1rem; grid-gap: @gap / 2;→ 报错 - 正确写法：
grid-gap: (@gap / 2);或改用math: 1配置兜底 - 注意：即使你没写任何计算，只要项目中某个被 import 的文件里有类似表达式，整个编译就会失败
为什么升级到 Less 4.x 后 repeat(@n, 1fr) 突然失效
根本原因不是 repeat() 被 Less 拒绝，而是你依赖的变量 @n 在计算过程中触发了数学模式校验。例如：
@cols: 12;
@n: @cols - 2; // Less 4.x 要求此处也加括号：(@cols - 2)
.grid { grid-template-columns: repeat(@n, 1fr); }
编译器在解析 @n 定义时就卡住，后续整条规则不会生成，浏览器自然看不到 grid-template-columns。
- 错误现象：CSS 文件里完全缺失该规则，控制台无报错（静默丢弃）
- 排查重点：不是看
repeat()写法，而是检查所有参与赋值的变量是否含未括号运算 - 临时绕过：配置
math: 1，但别把它当成修复，只是延后暴露问题
更新编译器版本不能解决 Grid 语法本质限制
把 Less 升到 4.2 或更高，并不会让 repeat(@n, 1fr) 变成有效 CSS。CSS 规范本身禁止非字面量数字作为 repeat() 第一个参数，浏览器解析时直接忽略整条声明——这是运行时限制，和 Less 版本无关。
- Less 编译后输出
repeat(3, 1fr)是 OK 的，但repeat(@n, 1fr)中的@n若未被展开为纯数字（比如用了字符串拼接~"repeat(@{n}, 1fr)"），结果就是无效 CSS - 真正可靠的自适应方案仍是
repeat(auto-fit, minmax(@min-width, 1fr))，它不依赖列数变量 - 如果你硬要动态列数，就得靠 JS 设置
element.style.gridTemplateColumns，Less 做不了这件事
升级后最易被忽略的配置生效位置
math 配置必须在 Less 编译器启动时传入，写错层级等于没配：
- Webpack +
less-loader：必须放在less-loader的options里，不是 loader 外层 - Vite：必须嵌套在
css.preprocessorOptions.less下，漏掉preprocessorOptions就无效 - 命令行
lessc：必须加--math=1参数，配置文件里的设置会被忽略
没生效的表现是：错误照报，且构建工具不提示配置缺失——它就当没这回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
