less中calc()内变量需用~""转义和@{var}插值，如height: ~"calc(100vh - @{header-height})"；单位必须明确，多变量运算宜拆解中间步骤；响应式应依赖css自定义属性而非less变量重定义。
Less里直接写calc(@var - 20px)会编译出非法CSS，浏览器静默丢弃该声明——这不是语法错误，而是变量根本没被展开。
calc()内部的Less变量必须显式插值
Less把calc()识别为原始值节点，不触发变量替换。你写的height: calc(100vh - @header-height);会被原样输出，变成height: calc(100vh - @header-height);，浏览器不认识@header-height这个符号。
- 正确写法只有一种：用
~""转义 +@{var}插值，例如：height: ~"calc(100vh - @{header-height})"; - 所有参与运算的变量都得带单位，比如
@header-height: 64px;，不能写@header-height: 64; - 乘除运算中，如果一边是纯数字（如
* 2），另一边必须是带单位变量；两边都带单位（如@w * @h）会编译失败或输出无效CSS
多个变量混合运算时要拆解中间步骤
像calc((100vw - 2 * @gutter - 3 * @item-width) / 3)这种表达式，堆在一行插值极易出错：括号可能失配、单位可能丢失、除法结果无单位导致calc()失效。
- 先定义中间变量：
@total-gap: unit(@gutter, 'px') * 2;（用unit()确保单位明确） - 再构造安全表达式：
width: ~"calc((100vw - @{total-gap} - @{item-width} * 3) / 3)"; - 调试时加个
.debug { content: "@{final-calc-expression}"; }，检查编译后字符串是否符合预期
和CSS自定义属性（--var）混用时fallback不能少
Less变量和CSS变量是两套系统。你用~"calc(100% - @{sidebar-width})"生成--main-width，只是把计算结果塞进去；但若后续JS动态改--sidebar-width，calc()才真正起作用——这时没fallback就危险了。
- 所有
var(--x)都要配fallback：width: calc(var(--main-width, 100%) - var(--offset, 0)); - 不要嵌套
calc()：calc(var(--a) + calc(var(--b) * 2))❌，浏览器报语法错误 - 单位混用（如
%和px）可行，但%只在width、top等属性中生效，用在font-size里等于无效
最易忽略的是响应式场景：Less变量在媒体查询里重定义（如@media (max-width: 768px) { @header-height: 48px; }）不会影响已编译好的calc()表达式——它只在编译期展开一次。真要响应变化，得靠CSS自定义属性 + var() + calc()组合，Less只负责初始值注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
