<p>Less编译阶段未计算的除法表达式（如width: 100px / 4;）导致输出非法CSS，压缩工具仅处理字符串、不修正语法，浏览器静默丢弃规则；正确写法为width: (100px / 4);或width: 100px ./ 4;，calc()需转义为calc(~"100% - 44px");。</p>
压缩工具本身不会“破坏” Less 计算结果——因为 Less 的计算在编译阶段就已完成，CSS 压缩只处理最终输出的 CSS 字符串。真正出问题的地方，是 Less 编译阶段没算出来，而压缩工具又把那些“看似无效但其实本该被计算”的表达式（比如未括号的 /）原样保留，导致浏览器静默丢弃整条规则。
为什么压缩后样式突然失效
典型现象：开发环境一切正常，构建后按钮高度塌陷、间距错乱、颜色丢失；DevTools 里对应 CSS 规则被划掉，显示 Invalid property value 或直接不渲染。
- 根本不是 CSSNano 或其他压缩工具干的——它们只删空格、合并声明、缩短颜色值，不会碰
/运算符 - 真正的问题是：Less 编译时
width: 100px / 4;没算出25px，而是原样输出成width: 100px / 4;，这条 CSS 语法非法，浏览器直接忽略 - 压缩工具照单全收，还可能把空格删得更干净（如变成
width:100px/4;），让错误更隐蔽
Less 除法必须加括号或用 ./ 才生效
Less 4.0+ 明确将未包裹的 / 当作 CSS 字面量分隔符，不是运算符。不加干预，它永远不计算。
- ✅ 正确写法：
width: (100px / 4);—— 推荐，语义清晰，支持嵌套和单位混合 - ✅ 替代写法：
width: 100px ./ 4;—— 注意前后必须有空格：100px ./ 4✅，100px./ 4❌，100px ./4❌ - ❌ 错误写法：
width: 100px / 4;→ 输出无效 CSS，压缩后照样失效 - ❌ 错误写法：
width: (100 / 4)px;→ 报错Operation on an invalid type，单位位置错了
calc() 在 Less 里被提前解析，压缩前就废了
Less 会把 calc(100% - 44px) 当成数学表达式先算一遍，得到 calc(56%) 再输出——这不是浏览器要的 calc，浏览器收到的是语法错误。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须转义：
height: calc(~"100% - 44px"); - ✅ 带变量时：
calc(~"100% - @{extra}");或calc(~"100% - "(@extra)); - ⚠️ 注意空格：
~"100vh - 133px"✅，~"100vh-133px"❌（CSS 层面已非法） - ❌ 不要写
calc(~"assets/@{name}.png")——~""内变量不展开，必然 404
最麻烦的不是语法怎么写，而是你得手动检查编译后的 CSS 文件里有没有带 / 的声明行——漏一个括号，整个组件可能就塌了，而构建过程零报错、控制台零提示。
