CSS calc除法计算结果异常，LESS流体布局百分比单位输出错误

问题诱因 #

• LESS默认开启算术表达式预计算：哪怕是写在calc()内的表达式，LESS也会在编译阶段提前求值，不会保留原表达式交给浏览器运行时计算。使用px单位时LESS的预计算规则和预期一致，因此没有暴露问题；使用百分比单位时，LESS会将%识别为数值系数（比如75%会被当作0.75参与运算），和你预期的「75作为百分比数值」的规则不符，最终结果出现偏差。
• 变量引用错误：你提供的混入代码中，断点计算部分存在变量名不一致的问题：100vw减去的是@tabletBreakpoint，但分母的减数是@tableWidth，如果两个变量实际值不一致，会直接导致计算比例错误，这也是你第一个简单除法示例结果不符合预期的核心原因——LESS预计算时实际用到的数值并不是你以为的702和672。

解决方案 #

1. 禁止LESS预编译calc表达式
   将所有calc(...)写法替换为LESS转义语法~"calc(...)"，告诉LESS不要解析内部内容，直接原样输出交给浏览器运行时计算，避免预计算带来的单位处理、精度偏差问题。修改后的混入代码如下：

/** linear interpolate value from small to big as screen goes from small-size to big-size */
.scalable-unit(@property, @small, @big, @unit) {
  @{property}: clamp(
      unit(@small, @unit),
      ~"calc(@{small}@{unit} + (@{big} - @{small}) * ((100vw - @{tabletBreakpoint}) / (@{desktopWidth} - @{tabletBreakpoint})))",
      unit(@big, @unit),
    );
}

2. 统一断点变量名
   将分母中的@tableWidth修正为和分子一致的@tabletBreakpoint，确保计算比例的基准正确。
3. 百分比单位适配
   使用百分比作为单位时，无需额外调整参数，转义后的calc会保留%符号的语义，由浏览器根据对应元素的父级宽度基准计算最终值。

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