calc()中变量需用~"calc(@{var})"显式插值，否则Less不展开；所有变量须带单位，单位混用需统一转换；中间变量建议加-value后缀提示终态值。
calc()里直接写@var会失效，因为Less不自动展开
Less 把 calc() 当作原始字符串节点处理，内部的 @header-height 不会触发变量替换。你写了 height: calc(100vh - @header-height);，最终 CSS 输出仍是 calc(100vh - @header-height)，浏览器直接报 invalid property value。
这不是语法错误，而是编译机制决定的：Less 先做变量展开，但 calc() 内部被跳过。必须显式插值才能让变量落地。
- 所有参与
calc()的变量都得带单位（如@gap: 16px），否则@gap * 2会输出无单位数值，塞进calc()就非法 - 避免混用写法：
calc(~"100%" - @offset)❌，-被 Less 当作减法运算符，不是字符串拼接 - 调试时加个
.debug { content: "@{final-expression}"; }，肉眼确认编译结果是否含正确单位和括号
必须用 ~"" + @{var} 组合才能生成合法 calc 表达式
唯一可靠写法是用转义字符串 ~"" 包裹，再用 @{var} 显式插值。例如：
height: ~"calc(100vh - @{header-height})";这会让 Less 在编译期把 @{header-height} 替换为 64px，最终输出 calc(100vh - 64px)，浏览器可执行。
立即学习“前端免费学习笔记（深入）”；
-
~"calc(@{a} + @{b})"合法；calc(@{a} + @{b})❌，后者会被当作函数调用解析 - 复杂公式别硬堆一行，比如
calc((100vw - 2 * @gutter - 3 * @item-width) / 3)，建议拆成中间变量：@total-gap: unit(@gutter, 'px') * 2; - 如果变量本身是纯数字（如
@gap: 16），必须先用unit(@gap, 'px')补单位，否则乘除后单位丢失
定义 CSS 自定义属性（--var）时 calc 插值逻辑不变
想把运行时计算能力注入 --width 这类 CSS 变量，仍需 ~"" + @{}。写 --width: calc(100% - @gap); 会原样输出字符串，无效。
正确方式是：
--main-width: ~"calc(100% - @{sidebar-width})";这样生成的 --main-width: calc(100% - 240px); 才能被 width: var(--main-width); 正确消费。
- 不要试图在 Less 中提前算出数值再赋给 CSS 变量，比如
--height: @{header-height};→ 输出--height: 64px;没问题，但--height: @{header-height} + 1px;会变成--height: 64px + 1px;，CSS 不认 - 响应式场景下，媒体查询里重定义
@header-height不会影响已编译的calc()，因为 Less 变量重定义不回溯 -
var(--x)不能参与 Less 运算，width: var(--x) * 2直接报错；进一步计算得靠clamp()或 JS
单位混用和括号优先级容易踩坑
Less 的括号只控制编译期运算顺序，不生成 calc() 语义。写 (100% - 2rem) 和 100% - 2rem 编译结果一样，都是字面量字符串，浏览器无法运行。
单位混用必须在 Less 层统一：比如 @gap: 2rem 和 @padding: 16px 不能直接相加，要先转成同单位：@gap-px: unit(@gap, 'px');。
-
unit(@val, 'px')强制转换单位，但若@val原本无单位（如@val: 20），会失败；建议前置判断ispixel(@val) - 用
round(@val, 2)控制小数位，避免1.2349999999999999rem这种浮点误差 - 所有参与
calc()的中间变量，命名时加-value后缀（如@sidebar-width-value）能提醒自己这是用于插值的“终态值”
Less 的 calc 插值不是语法糖，是编译机制倒逼出的固定模式。漏掉 ~"" 或写错 @{}，结果就是 CSS 无效，而且浏览器不报错、只静默忽略——这点最危险。
