calc() 中不能直接使用 less 运算，需用 ~"" 插值绕过编译期计算；变量必须带明确单位，避免 unit() 等函数导致单位丢失；多变量建议先拼接字符串再插值；单位缺失会使 calc() 静默失效。
calc() 里不能直接用 Less 运算，否则会提前计算
Less 在编译阶段就会执行 +、-、*、/ 等运算，而 calc() 是浏览器运行时才解析的 CSS 函数。如果你写成 width: calc(100% - 20px + @gap * 2);，Less 会尝试把 @gap * 2 当作数值参与计算，报错或输出错误值（比如 @gap: 8px 时可能变成 calc(100% - 20px + 16)，漏掉单位）。
关键原则：所有要进 calc() 的表达式，必须绕过 Less 编译期计算，原样透传到最终 CSS 中。
用插值 ~"" 包裹整个 calc 表达式
Less 提供字符串插值语法 ~""，它会跳过内部所有运算解析，仅做字面量拼接。这是最稳妥、兼容性最好的方式。
@gap: 8px;-
width: ~"calc(100% - 20px + @{gap} * 2)";→ 输出width: calc(100% - 20px + 8px * 2); - 注意
@{gap}必须带花括号，否则插值不生效 - 乘除运算符前后建议加空格，避免某些旧版浏览器解析异常（如
8px*2不如8px * 2稳定）
避免在 calc 中混用不同单位的 Less 变量
即使用了 ~""，如果变量本身是复合计算结果（比如 @height: unit(@base * 1.2, px);），仍可能因单位丢失导致 calc() 运行时报错（如 NaNpx 或无效值）。
- 只对已知单位明确的变量做插值，例如
@gap: 8px;、@offset: 1rem; - 避免插值含
unit()、round()等函数调用的结果，除非你确认它输出带单位的字符串 - 调试时可临时用
content: "@{gap}";查看变量实际值，确认单位是否还在
需要动态组合多个变量？用字符串拼接 + 插值
当涉及三个以上变量（如 @a、@b、@c）参与 calc()，不要试图在 ~"" 里嵌套运算，而是先拼好字符串再插值。
@a: 100%;@b: 20px;@c: 4px;@expr: "calc(@{a} - @{b} + @{c} * 3)";-
left: ~"@{expr}";→ 输出left: calc(100% - 20px + 4px * 3); - 这样比硬写在
~""里更易读、易维护，也避免引号嵌套混乱
真正容易被忽略的是单位一致性——calc(100% - 1em + 8) 中的 8 没有单位，浏览器直接丢弃整段表达式，且不报错。只要有一个值单位缺失，整个 calc() 就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
