Less中含变量的calc()需用~"calc(@{var}...)"包裹才能保留原生计算，否则会被提前编译为静态值；插值内变量必须用@{}、乘除符不可有空格，避免+/-开头表达式。
Less里直接写calc()会被编译成字符串还是计算值
Less默认会把calc()当作普通CSS函数处理，但前提是它**不包含Less变量或运算符**。一旦你在calc()里写@width + 10px这类表达式，Less就会提前求值，结果不是你想要的原生calc()，而是个静态数值（比如200px），失去响应能力。
常见错误现象：width: calc(@container-width / 2 - 20px); → 编译后变成width: 300px;（假设@container-width是640px），浏览器完全收不到calc()。
- 想保留原生
calc()，就得阻止Less解析里面的表达式 - 最稳妥的方式是用插值
~"..."包裹整个calc()调用 - 注意：插值里的引号必须是双引号，单引号在某些Less版本中不生效
用~"calc(...)"安全包裹含变量的表达式
这是目前兼容性最好、行为最确定的做法。插值~""告诉Less：“别动这里面的东西，原样吐出去”。
@gap: 20px;
@container-width: 100%;
width: ~"calc(@{container-width} - @{gap} * 2)";编译结果就是：width: calc(100% - 20px * 2); —— 浏览器运行时才计算，支持动态单位混合（如% + px）。
立即学习“前端免费学习笔记（深入）”；
-
@{variable}必须显式写出，不能省略@{}，否则插值里无法识别变量 - 乘除运算符前后不能有空格（
*2可以，* 2在部分Less版本中会导致编译失败） - 避免在插值里写
+或-开头的表达式（如~"calc(@{a} + 10px)"），某些旧版Less会误判为加法运算
为什么不用unit()或percentage()替代calc()
这些Less内置函数只能做单一类型转换，没法解决混合单位的运行时计算问题。比如unit(100% - 20px, px)根本无效——百分比和像素不能直接相减，Less也不允许跨单位运算。
-
unit()只负责“去掉单位再套新单位”，不参与数学逻辑 -
percentage()只对小数转百分比有用（如percentage(0.5)→50%），对calc()场景无意义 - 真正需要的是浏览器在渲染时按视口实时计算，只有原生
calc()能做到
遇到calc()嵌套或复杂表达式怎么办
Less本身不解析calc()内部，所以嵌套本身没问题（如calc(calc(100% - 20px) / 2)）。但如果你要拼接多段动态值，建议拆成多个插值，或提取为带参数的Mixin，避免一行过长难维护。
.responsive-width(@base, @offset) {
width: ~"calc(@{base} - @{offset})";
}
.responsive-width(100%, 40px);编译后：width: calc(100% - 40px);
- Mixin里仍需用
~""和@{}，不然参数传进来还是会被提前计算 - 不要试图在
calc()里调用Less函数（如~"calc(lighten(@color, 10%) + 10px)"），这会让编译器崩溃或产出无效CSS
真正容易被忽略的是：只要calc()里出现任何Less变量、函数或运算符，就必须用~""包裹，且变量必须用@{}语法显式引用——少一个符号，就可能让整个计算逻辑从运行时退化成编译时静态值。
