SASS使用math.div()时内部传入变量触发编译报错问题

math.div()是Sass内置的数值运算函数，仅支持传入**数值类型（含带单位的合法数值）**作为参数。如果传入插值转换后的字符串、带引号的字符串类数值，都会触发编译报错。

对应问题解法 #

• 不要在math.div()内部用插值语法#{}：插值会强制把变量转换为字符串类型，完全不符合函数入参要求，会直接把警告升级为编译错误
• 确保传入的变量本身是合法数值类型：不要给变量加引号、不要提前用插值处理变量赋值

错误写法示例 #

// 错误1：函数内部加插值
@use "sass:math";
$width: 300px;
.item {
  width: math.div(#{$width}, 3);
}

// 错误2：变量本身是字符串类型
@use "sass:math";
$width: "300px";
.item {
  width: math.div($width, 3);
}

正确写法示例 #

// 顶部必须引入math模块（项目已全局引入可省略）
@use "sass:math";
// 变量声明为纯数值类型，可携带合法单位
$width: 300px;
.item {
  // 直接传入变量即可，无需额外处理
  width: math.div($width, 3); // 编译后输出 width: 100px;
}

// 特殊场景：变量无单位，运算后再拼接单位的写法
@use "sass:math";
$baseNum: 600;
.item {
  width: math.div($baseNum, 3) + px;
}

对应的报错截图参考：

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