必须为所有除法/乘法显式加括号，如grid-gap: (@gap / 2);和@n: (@cols - 2);，否则Less 4.x严格数学模式会报Operation on an invalid type并静默丢弃整条规则；配置math: 1仅临时兜底，不解决根本问题。
Less 4数学模式报Operation on an invalid type怎么办
Less 4默认启用严格数学模式，所有除法/乘法必须显式加括号，否则直接中断编译——不是语法错误，是解析器拒绝执行未括号的运算。
-
grid-gap: @gap / 2;→ 必须改成grid-gap: (@gap / 2); -
@n: @cols - 2;→ 若@cols来自计算（如@cols: 12 / 3;），这行本身就会报错，得写成@n: (@cols - 2); - 哪怕只有一处
@import进来的文件里含未括号运算，整个编译链都会静默失败，CSS缺失且无提示 - 临时兼容可加配置
math: 1（Webpack中less-loader的options.math = 1），但只是掩盖问题，不解决变量展开逻辑
repeat(@n, 1fr)失效不是Grid语法问题
Less 4不会“拒绝”repeat()，而是卡在@n定义环节：只要@n依赖未括号运算或非字面量，整条规则就被丢弃，最终CSS里根本没这条声明。
-
@n: 3;→repeat(@n, 1fr)编译为repeat(3, 1fr)，合法 -
@n: @cols / 2;→ 编译器在解析@n时就报Operation on an invalid type，后续规则不生成 -
repeat(@{n}, 1fr)或~"repeat(@{n}, 1fr)"输出的是字符串，浏览器无法识别，仍是无效CSS - 真正跨浏览器可用的写法只有
repeat(auto-fit, minmax(@min-width, 1fr)))，不依赖变量数值
嵌套选择器权重暴涨导致样式不生效
Less 4对嵌套解析更严格，深层嵌套（≥4层）不仅生成超长选择器，还常因&误用导致权重意外增加，浏览器匹配失败。
-
.card { .header { .title { color: red; } } }→ 输出.card .header .title（权重0-3-0），易被其他规则覆盖 -
& .close（带空格）→ 输出后代选择器，比&__close多一层权重，且可能匹配到不该匹配的元素 -
&:hover没问题，但&:not(:hover):focus这种复杂伪类，Less嵌套难表达，建议抽到@at-root平级写 - 响应式嵌套必须用
@at-root跳出：@at-root @media (min-width: 768px) { &--large { font-size: 18px; } }
升级后@import行为变化引发静默崩溃
Less 4对@import链路校验更严，环状依赖不再卡住，而是直接报FATAL ERROR: JavaScript heap out of memory或Variable is undefined，但错误位置常远离真实循环点。
- 把所有
@import "xxx.less"临时改成@import (inline) "xxx.less"，循环会立刻暴露为Cannot access property或Variable @xxx is undefined -
@import (reference)不能解决循环——它只控制样式输出，不影响变量作用域加载顺序 - 典型陷阱：
theme.less→mixins.less→button.less→theme.less，三层引用后才闭环，肉眼难查 - 解法是物理拆解：新建
core/tokens.less，只放@primary-color等原子变量，所有文件顶部统一@import "core/tokens.less"，且该文件禁止@import任何其他文件
复杂点在于，Less 4的报错往往不指向你写的那行，而是上游变量定义或@import路径；静默丢弃规则比报错更难排查，得靠检查最终CSS输出是否缺失对应块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
