为什么在 mixin 的结果中添加了一个额外的“px”？

我编写了以下自适应属性的混合：

@import "./settings.scss";

@mixin adaptiveProperty($property, $startValue, $secondValue, $mode) {
    $addValue: $startValue-$secondValue;

    @if ($mode == 1) {
        @media (max-width: #{$maxWidthContainer+px}) {
            #{$property}: calc(
                #{$startValue+px}+$addValue * (100vw-#{$minWidth+px}) / (#{$maxWidthContainer+px}-#{$minWidth+px})
            );
        }
    } @else if ($mode == 2) {
        @media (min-width: #{$maxWidthContainer+px}) {
            #{$property}: calc(
                #{$startValue+px}+$addValue * (100vw-#{$minWidth+px}) / (#{$maxWidthContainer+px}-#{$minWidth+px})
            );
        }
    } @else {
        #{$property}: calc(#{$startValue+px}+(#{$addValue}* ((100vw-#{$minWidth+px}) / #{$maxWidth-$minWidth})));
    }
}

该文件包含settings.scss以下设置：

$font-family: "Roboto";
$fontSize: 16;
$maxWidthContainer: 1000;
$maxWidth: 1920;
$minWidth: 320;

现在当像这样调用 mixin 时：

.test_header{
    @include adaptiveProperty("font-size", 30, 16, 0) // Шрифт должен быть 30px на экране шириной 1920px и уменьшаться до 16px на 320px 
}

但是在编译的 css 文件中，我得到了这样的属性：

.test_header {
  font-size: calc(
            30px+calc(30px-16px)px* (100vw-320px) / (1920px-320px)
        );
}

括号后面是calc(30px - 16 px)多余px的，而且似乎是一个额外的换行符。我认为这就是为什么我的 mixin 不起作用的原因。如何修复公式以px从最终结果中删除这些不必要的？