Less中calc()内变量不生效的根本原因是编译时calc()被当作原始值节点，变量不自动展开，必须用~""转义加@{...}插值才能正确输出带单位的CSS值。
Less 里直接写 calc(@var - 20px) 会编译失败或输出非法 CSS，根本原因不是语法错，而是 Less 在解析阶段就把 calc() 当作普通字符串处理，不展开内部变量 —— 所以你必须显式告诉它：“这里要插值”，否则浏览器收到的是 calc(@var - 20px)，直接忽略。
为什么 calc() 里的变量不生效？
Less 编译分两步：先展开变量（如 @header-height: 64px → 替换所有 @{header-height}），再生成 CSS。但 calc() 被识别为一个“原始值节点”，里面的 @header-height 不触发变量替换，除非你用 @{...} 显式插值。常见错误现象：
- 写了
height: calc(100vh - @header-height);，结果 CSS 输出height: calc(100vh - @header-height);，浏览器报invalid property value - 用了
calc(@base-width + @gap)，但@base-width是100px、@gap是20（无单位），输出变成calc(100px + 20)，违反 CSS 规范，Chrome 静默丢弃
正确写法只有两种：插值 or 转义
核心是让变量在编译期被替换成实际值，再塞进 calc() 字符串里。必须组合使用 ~"" 和 @{...}：
-
height: ~"calc(100vh - @{header-height})";——~""表示不转义，@{header-height}触发替换，最终输出calc(100vh - 64px) -
width: ~"calc(@{sidebar-width} + @{gutter} * 2)";—— 所有参与运算的变量都得带单位（如@sidebar-width: 240px，@gutter: 16px），否则乘法后单位丢失 - 避免混用写法：
calc(~"100% - @{offset}")合法，但calc(~"100%" - @offset)❌，因为-被 Less 当作减法运算符，而非字符串拼接
复杂公式必须拆解，不能堆在一行
像 calc((100vw - 2 * @gutter - 3 * @item-width) / 3) 这种表达式，直接插值极易出错。Less 不报错，但编译后单位错乱或括号失配。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用中间变量分步计算：
@total-gap: unit(@gutter, '') * 2;（先剥离单位做纯数运算） - 确保除法有明确单位上下文：
@item-width: 200px;，不能写@item-width: 200;，否则/ 3后还是无单位，塞进calc()会失效 - 优先用
unit()统一单位：@safe-width: unit(@item-width, 'px');，再参与运算 - 调试时把最终表达式打印出来：
.debug { content: "@{final-calc-expression}"; }，检查编译结果是否符合预期
响应式场景下，calc() 无法响应媒体查询重定义的变量
Less 变量重定义（如 @media (max-width: 768px) { @header-height: 48px; }）只影响后续规则，不会回溯修改已编译的 calc() 表达式。这意味着：
- 同一个
.container类，在不同断点下高度不会自动变化 - 真正可行的方案只有两个：
.container.desktop { height: ~"calc(100vh - 64px)"; }或用clamp()替代（现代浏览器） - 如果必须用
calc()做响应式字体，别依赖变量重定义，改用视口单位直接算：font-size: ~"calc(1rem + 0.5vw)";，系数提前算好，不依赖运行时变量
最易被忽略的一点：所有参与 calc() 插值的变量，必须在使用前已声明且带单位。Less 不会报错，但编译结果不可预测 —— 它可能输出空字符串、NaN，或者把无单位数和 px 直接拼在一起，导致整个样式失效。
