SCSS中px转rem函数输出参与运算报‘Undefined operation’错误求助

你的问题出在to-rems函数的返回值类型上——当前函数返回的是字符串形式的rem值（比如0.875rem），不是Sass能识别的可运算单位数值，所以直接做乘法会报错。

两种可行的修复方案： #

方案1：函数返回纯数值，后续手动加单位

这种方式更灵活，适合需要多次基于基准值运算的场景：

@function to-rems($size) {
  // 返回不带单位的比例值（基于16px基准）
  @return $size / 16px;
}

$baseline-grid: to-rems(14px); // 得到纯数值0.875

#box {
  width: $baseline-grid * 2 + rem; // 最后拼接rem单位，结果为1.75rem
}

方案2：让函数返回Sass原生的rem单位数值

如果希望函数直接返回可运算的rem值，修改函数内部的计算逻辑：

@function to-rems($size) {
  // 通过数值运算生成Sass可识别的rem单位值
  @return ($size / 16) * 1rem;
}

$baseline-grid: to-rems(14px); // 得到0.875rem（原生单位数值）

#box {
  width: $baseline-grid * 2; // 正常运算，结果为1.75rem
}

为什么原来的写法不行？ #

你用的calc($size / 16px) + rem本质是把calc的计算结果和字符串"rem"拼接，最终得到的是一个字符串，而非Sass原生支持的单位数值类型。这种字符串无法被Sass解析为可参与数学运算的数值，自然会抛出Undefined operation错误。

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