SCSS自定义calcSize函数出现calc运算未定义错误该如何解决

SCSS作为预处理器，所有自定义函数内的数值运算都会在编译阶段执行，而calc()是CSS原生函数，依赖浏览器运行时才能拿到动态值（比如视口宽度vw）。你将calc(100vw - 405px)赋值给SCSS变量$containerWidth时，该变量实际存储的是字符串类型的CSS表达式，SCSS编译阶段无法对字符串执行数值乘除运算，因此触发报错。

将运算逻辑直接拼接为CSS原生calc()表达式，SCSS仅负责变量插值，不需要在预编译阶段执行计算，修改后的函数如下：

@function calcSize($value) {
  $initialContainer: 1278;
  @return calc(#{$value} * (100vw - 405px) / #{$initialContainer});
}

原有调用逻辑不需要修改：

.module-title {
  font-weight: 700;
  font-size: calcSize(45);
}

编译后会生成合法的CSS代码，动态计算逻辑交给浏览器运行时处理即可：

.module-title {
  font-weight: 700;
  font-size: calc(45 * (100vw - 405px) / 1278);
}

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