less 4.0 中 calc() 默认被编译器当作数学表达式计算，导致跨单位运算失败；必须用 ~"calc(...)" 原样透传，变量需在引号外展开并确保带单位。
Less 4.0里calc()被算成静态值，根本不是浏览器在算
Less 4.0 默认把 calc() 当作数学表达式节点处理，遇到 100vh - 64px 就直接执行减法——但它根本不支持跨单位运算，于是强行折算或报错。你看到的 height: calc(36vh) 或 Operation on an invalid type，都是 Less 编译期干的，浏览器压根没见到原始 calc()。
必须用 ~"" 包裹整个 calc 表达式
~"" 是 Less 唯一能跳过编译、原样透传的语法，不是可选项，是刚需：
-
height: ~"calc(100vh - 64px)";✅ 输出height: calc(100vh - 64px); -
height: calc(100vh - 64px);❌ Less 尝试计算，大概率崩或输出错误值 -
height: ~'calc(100vh - 64px)';❌ 单引号不触发透传，仍可能解析失败
变量插值只能在 ~"" 外展开，不能混写
~"" 内部是纯字符串，@{var} 不会自动替换。常见翻车写法：
-
~"calc(100% - @{gap})"❌ 编译报错：插值在转义字符串内无效 -
~"calc(100% - " + @gap + ")"✅ 拼接后整体透传，@gap在~""外已展开 -
@calc-val: "100% - @{gap}"; height: ~"calc(@{calc-val})";✅ 先展开变量到字符串，再透传
所有参与运算的变量（如 @gap、@header-height）必须自带单位，否则拼进去的 calc() 会因单位缺失被浏览器静默丢弃。
嵌套 calc 或复杂公式要提前拆解
像 calc((100vw - 2 * @gutter - 3 * @item-width) / 3) 这种，别硬塞进一行。Less 不校验括号匹配，也不检查单位一致性，出错时既不报错也不警告，只输出非法 CSS。
- 先定义中间变量：
@total-gap: (2 * @gutter); @total-items: (3 * @item-width); - 再拼接：
width: ~"calc((100vw - @{total-gap} - @{total-items}) / 3)"; - 确保每个变量都带单位：
@gutter: 12px;、@item-width: 200px;
真正容易被忽略的点是：只要没加 ~""，后面所有空格、单位、括号规则都白搭——Less 根本不会把那段代码当 CSS 看，早就在编译期把它嚼碎吐错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
