less中未加括号的“/”被当作css分隔符而非运算符，导致100px/4原样输出为无效css；正确写法只有(100px/4)或100px./4，且calc()内需用~""转义变量。
Less单位计算错误在移动端不是“算错了”，而是你写的表达式根本没被编译器当运算处理——它原样输出成无效 CSS，浏览器直接静默丢弃。最典型的就是 100px / 4 不变成 25px，而是变成 100px / 4，整条规则失效。
为什么100px / 4编译后不生效
Less 4.0+ 把未加括号的 / 当作 CSS 字面量分隔符，不是运算符。它不是bug，是明确设计行为：除非你显式告诉它“这是运算”，否则就不算。
-
width: 100px / 4;→ 输出width: 100px / 4;，DevTools 中该行被划掉（CSS语法错误） -
@size: 16px / 2;→@size值是字符串"16px / 2"，后续所有引用都错 - VS Code 的 Easy Less 插件也遵循此规则，不会自动补括号
必须用的两种除法写法
只有以下两种写法能真正触发单位计算，其他都无效：
-
width: (100px / 4);—— 推荐。语义清晰，支持嵌套如(2rem / 2)，单位兼容稳 -
width: 100px ./ 4;——./是 Less 特有触发符，注意前后必须有空格：100px ./ 4✅，100px./ 4❌，100px ./4❌
反例：(100 / 4)px 报 Operation on an invalid type；100 / 4px 单位位置错，结果不可预期。
calc()里混用 Less 变量总出错
Less 会提前解析 calc(100% - @gutter) 里的减号，算成 calc(56%) 或更糟——根本没传给浏览器。
- 必须用转义：
height: calc(~"100% - 44px"); - 带变量时，变量要放在字符串内：
calc(~"100% - @{extra}px")，不能写calc(100% - @{extra})（缺单位） - 运算符两侧必须有空格：
~"100vh - 133px"✅，~"100vh-133px"❌（CSS 层面就无效）
单位混合运算容易踩坑
加减法要求单位一致；乘除法允许无单位数参与，但单位混搭仍会崩：
-
margin: 10px * 2;→ 正确，输出20px -
height: 10px + 2em;→ 报错：单位不可加 -
font-size: 14px + 2;→ 若strictMath: false可能隐式转成14px + 2px，但不推荐依赖 - 混合运算如
@a + @b / 2，即使配置了math: 1，也建议加括号：@a + (@b / 2)
漏一个括号，可能让整个组件高度塌陷，而构建不报错、控制台无提示——你得手动检查生成的 CSS 文件，或用 grep 扫描含 / 的声明行，确认是否被原样输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
