Less 编译 CSS3 calc() 函数被提前计算为错误数值的解决方案

在编写 CSS 时，我们常用 calc(100% - 80px) 来动态计算容器宽度。但在使用 Less 预处理器编译时，Less 会误将减号当作自身的数学减法运算，强行输出为错误的 calc(20%)，导致前端布局彻底崩溃。本文介绍两种标准规避方案。

一、 方案一：使用 Less 转义语法（~"..."，最推荐）

通过使用波浪号与双引号 ~"..." 包裹 calc() 内容，明确告知 Less 编译器按字符串原样输出，不要执行数学运算：

.container {
    width: ~"calc(100% - 80px)";
    height: ~"calc(100vh - 60px)";
}

二、 方案二：转义内部变量插值

如果计算公式中引用了 Less 变量，可以使用 ~"calc(... @{var})" 语法插值：

@header-height: 64px;

.main-content {
    height: ~"calc(100vh - @{header-height})";
}

编译后将准确输出标准的现代 CSS 规则：height: calc(100vh - 64px);