less在编译时计算表达式，calc()由浏览器运行时求值；单位混合、运算符优先级和变量处理方式不同，需用~""转义避免less解析calc()内容。
Less 会主动计算表达式，而 calc() 是浏览器运行时求值
根本区别在于执行时机和作用域：calc() 是纯 CSS 函数，所有计算由浏览器在渲染时完成；Less 的 +、-、*、/ 是预处理器层面的运算符，编译阶段就尝试求值。比如 100% - 20px 在 Less 里被当作“单位混合运算”处理（非法），直接报错或错误简化为 80%；而 calc(100% - 20px) 到 CSS 阶段才交给浏览器，单位混合完全合法。
Less 运算符优先级规则不兼容 CSS calc() 的空格与单位语义
calc() 要求运算符前后必须有空格（如 calc(100% - 20px)），否则无效；Less 却把空格当分隔符，且对单位强校验。更关键的是：Less 的 * 和 / 优先级高于 + 和 -，但当你写 calc(100% - 20px * 2)，Less 会先算 20px * 2 → 40px，再参与减法——这看似合理，可一旦变量介入（如 @gap: 20px; calc(100% - @gap * 2)），Less 就可能提前折叠成 calc(100% - 40px)，而你本意是让浏览器动态响应视口变化。
变量未求值时传入 calc() 会导致编译失败或结果错乱
Less 变量默认惰性求值，但 calc() 内部若直接拼接未展开的变量，就会触发类型冲突。常见错误现象：
-
margin-left: calc(50vw - @width / 2);编译后变成margin-left: -940VW;（负数+单位错乱） -
width: calc(@max-width - 20px);中@max-width若定义为@max-width: 1200px + 1em;，Less 无法统一单位，直接报Operation on an invalid type
解决方式不是调高优先级，而是切断 Less 解析链：calc(~"100% - @{width}") 或 ~"calc(100% - @{width})"，强制原样输出。
用 ~"" 转义是最稳定、最易排查的方案
所有含变量或混合单位的 calc() 表达式，只要不确定 Less 是否会插手，一律用 ~"" 包裹。这不是妥协，而是明确划分职责：
-
~"calc(100vh - @{header-height} - @{footer-height})"—— Less 不解析引号内任何内容 - 不要混用：
calc(~"100% - " + @offset + "px")错误！加号仍会被 Less 执行字符串拼接，可能引入空格或引号问题 - 注意
@{var}插值语法只在~""外有效；在~""内必须用@{var}，不能用@var
真正容易被忽略的点：转义后生成的 CSS 里，calc() 完全依赖浏览器支持，旧版 IE 需要额外 fallback；而 Less 自己算出来的值（比如你没转义时得到的 80%）看似“能用”，实则是静态快照，失去响应能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
