Less 默认宽松数学模式会错误解析 calc() 内表达式，导致单位丢失或计算失真；应使用 ~"" 转义语法原样输出，并确保变量自带单位，避免依赖 strictMath 配置。
calc() 在 Less 中被错误解析，不是浏览器不支持，而是 Less 把它当普通表达式提前计算了。直接写 calc(100% - 40px)，编译后大概率变成 calc(60%) 或更糟的 calc(-150%) —— 浏览器根本收不到原意。
为什么 calc() 里的减法会被 Less 当成自己的运算？
Less 默认启用宽松数学模式（strictMath: false），会主动解析所有含 +、-、/、* 的片段，哪怕它们在 calc() 里。比如：100% - 40px 被当作“百分比减像素”，而 Less 不支持跨单位减法，只能强行换算（比如按当前 font-size 折算 40px 成百分比），结果完全失真。
常见错误现象：
-
height: calc(100vh - @header-height);编译后输出height: calc(100vh - @header-height);（变量没展开） -
width: calc(100% - 50px);编译成width: calc(50%);（单位被吞掉，数值乱套） -
margin-left: 50vw - (@width / 2);直接崩成负数或非法值（这不是calc()，但同属 Less 运算干扰）
用 ~"" 转义是最稳的写法
加 ~ 是语法级跳过，告诉 Less：“这段别动，原样吐出去”。它支持变量插值，适配绝大多数场景。
- 固定值：
width: calc(~"100% - 16px"); - 带变量：
@gap: 24px; margin: calc(~"100% - @{gap}"); - 多变量：
@sidebar: 240px; @gutter: 16px; width: calc(~"@{sidebar} + @{gutter} * 2");
注意点：
-
~必须紧贴引号，~ "100%"❌（中间有空格就失效） - 引号内保留 CSS 所需空格：
~"100% - 40px"✅，~"100%-40px"❌（浏览器会拒收） - 不能混用：
calc(~"100%" - @gap)❌（-又被 Less 拦截了）
变量参与运算时，单位必须显式携带
Less 不会自动给数字补单位，@gap: 24; 和 @gap: 24px; 在 calc() 里后果天壤之别。
- 错误写法：
@gap: 24; width: calc(~"100% - @{gap}px");→ 输出calc(100% - 24px)看似对，但若@gap后续被重定义为2rem，插值就失效 - 推荐写法：
@gap: 24px; width: calc(~"100% - @{gap}");→ 单位随变量绑定，安全可追溯 - 复杂公式建议拆解：
@item-width: 200px; @gutter: 16px; @final-width: unit((100vw - 2 * @gutter - 3 * @item-width) / 3, 'px');，再用calc(~"@{final-width}")
调试技巧：加一条临时规则 .debug { content: "@{final-width}"; }，看编译后值是否符合预期。
别轻易开 strictMath: true
它能让 calc(100% - 40px) 原样输出，但代价是整个项目所有数学运算都得加括号：@size: (10px * 2);，否则 @size: 10px * 2; 直接不生效。
真正容易被忽略的是构建环境差异：
- Vue CLI 4+、Vite 的 less 插件默认已启用等效 strict 模式
- Webpack +
less-loader@3.x仍走老默认，calc()必崩 - 不能只查文档，得看实际打包产物——把编译后的 CSS 拿出来搜
calc，确认内容是否干净
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
