Scss断点计算函数返回未计算表达式而非数值该如何解决？

问题根源 #

1. 你混淆了Sass编译时计算和CSS运行时calc()计算的边界：calc()是CSS原生函数，Sass编译阶段不会解析里面的运算逻辑，只会原样输出，所以你拿不到编译后的计算结果。
2. 你在传参时用了#{$mediaBreakpoint}插值语法，直接把Sass数值类型转成了字符串类型，后续也无法再做数值运算。
3. 你输出的CSS里0.0625丢失了em单位，是插值使用不当导致的语法问题。

修正方案 #

因为你的断点值和要减去的0.0625em都是编译期就能确定的固定值，直接用Sass原生的数值运算即可，不需要调用CSS的calc()：

$mediaBreakpoint: map-get($breakpoints, $breakpoint);

// 若为max-width模式则减去1px
@if map-get($modes, $mode) == 'max-width' {
    $mediaBreakpoint: calculateMaxWidth($mediaBreakpoint); // 去掉插值，直接传数值
}
@debug $mediaBreakpoint; 

/**
* 根据输入计算max-width值
*/
@function calculateMaxWidth($breakpoint){
    // 直接用Sass数值运算，不需要calc()
    $newBreakpoint: $breakpoint - 0.0625em;
    @return $newBreakpoint;
}

修正后编译出来的CSS会直接得到你要的结果：

@media screen and (max-width: 47.9375em) {

}

特殊场景说明 #

如果你确实需要保留CSS calc()做运行时计算（比如要结合var()变量等动态值），才需要用calc()写法，这种场景下Sass本身就不会计算里面的表达式，属于预期行为。

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