less数学运算单位冲突的根本原因是编译期静态类型校验：加减法要求单位完全一致（如10px+5px），跨单位（如10px+1rem）直接报错；乘除法仅允许一个操作数带单位，且less会提前解析calc()导致单位混合失效，必须用~""转义。
Less 数学运算出现单位冲突，根本原因不是写错了，而是它把单位当类型在编译期做静态校验——10px + 5em不是“算不准”，是压根不让你算。
加减法要求单位完全一致
Less 的 + 和 - 不支持跨单位换算，哪怕你心里知道 1rem === 16px，它也不会自动转换。
-
10px + 5px→15px✅ -
1rem + 2rem→3rem✅ -
10px + 1rem→ 编译报错Operation on an invalid type❌ -
100% - 20px→ 同样报错或静默输出无效 CSS，浏览器直接忽略整条声明
乘除法只允许一个操作数带单位
乘除看似宽松，但规则很死：必须有一个操作数是纯数字（无单位），另一个可带单位；两个都带单位就崩。
-
10px * 2→20px✅ -
10px / 2→5px✅ -
10px * 1rem→ 报错 ❌（单位不可约） -
100% / 4→ 输出100% / 4字面量（Less 4.x 裸除失效），浏览器丢弃 - 正确写法：
(100% / 4)或100% ./ 4（注意空格）
单位丢失常发生在变量参与运算时
变量本身不携带运行时语义，@base: 8 就是数字 8，后面接 px 不等于 8px。
-
@base: 8; @gap: @base * 1.5px;→12px✅ -
@base: 8; @gap: 1.5 * @base px;→12（无单位）❌，后续用在margin里会塌陷 -
@gap: 1rem / 2（Less 4.x）→ 实际输出字符串"1rem / 2"，不是0.5rem - 修复方式：统一让带单位的操作数在左侧，或显式加括号：
(1rem / 2)
calc() 里的单位混合被 Less 提前截胡
你写的 calc(100% - 20px) 本该交给浏览器，但 Less 会把它当自己表达式先算——结果单位不兼容，要么报错，要么输出 calc(80%) 这种错值。
- 错误写法：
width: calc(100% - @gap);（@gap 是20px）→ Less 尝试计算，失败 - 正确写法：
width: ~"calc(100% - @{gap})";（@{gap}必须自带单位） - 漏单位会更糟：
@gap: 20;→ 插值后变成calc(100% - 20)，浏览器直接无视整条声明 - 空格不能少：
~"calc(100% - @{gap})"✅，~"calc(100%-@{gap})"❌（浏览器拒绝解析）
最易被忽略的点：单位冲突往往不报错，而是静默产出非法 CSS —— DevTools 里那条声明是灰色划掉的，你得盯着看，而不是等布局崩了才回头找。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
