如何强制LESS编译器预先计算指定变量运算以解决calc报错？

首先，先帮你理清为什么编译后的CSS会报错：CSS的calc()规则里，除法运算的除数必须是无单位的数值，你原来编译后的代码里除数是18px - 16px，结果是带单位的2px，这就违反了CSS的语法规则，所以浏览器会提示无效。

回到你的核心需求：让LESS预先计算指定变量的数学运算，其实只需要把要预计算的部分从calc()的字符串语境中剥离出来，让LESS先处理，再把结果代入即可。这里有两种简单的实现方式：

方式一：提前定义预计算的差值变量 #

先在LESS里把需要计算的差值转换成无单位数值，再用到calc()中：

@font-size-min: 16px; 
@font-size-max: 18px;
// 让LESS提前计算差值，并转成无单位数值（除以1px消除单位）
@font-size-diff: (@font-size-max - @font-size-min) / 1px; 

body { 
  font-size: calc((100vw - @font-size-min) / @font-size-diff); 
}

编译后的合法CSS：

body {
  font-size: calc((100vw - 16px) / 2);
}

方式二：直接在calc中嵌套LESS运算 #

如果你不想额外定义变量，也可以直接在calc()里用括号强制LESS先计算指定部分：

@font-size-min: 16px; 
@font-size-max: 18px;

body { 
  font-size: calc((100vw - @font-size-min) / ((@font-size-max - @font-size-min) / 1px)); 
}

这种写法会得到和上面完全一样的编译结果。

关键说明 #

LESS默认会把calc()内部的内容当作普通字符串处理，不会自动解析里面的运算——除非你用括号明确包裹需要预计算的部分，让LESS识别这是它需要处理的运算逻辑。而除以1px的作用是把带单位的差值（比如2px）转换成无单位的数值（2），这样才能符合CSS calc()对除法除数的要求。

内容的提问来源于stack exchange，提问作者Red