Scss 函数不返回计算值答案

【问题标题】：Scss function returns no calculated valueScss 函数不返回计算值
【发布时间】：2021-12-12 14:16:09
【问题描述】：

我正在开发用于断点的 mixin，但我遇到了以下问题。当设置了特定状态（最大宽度模式）时，应通过提取一个 em 值（1px/16（默认字体大小））重新计算断点。

这是我代码的重要部分（我可能会去掉这个函数，基本上这可以内联完成）：


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

// if the mode is for max-width then subtract 1px.
@if map-get( $modes, $mode ) == 'max-width' {
    $mediaBreakpoint: calculateMaxWidth(#{$mediaBreakpoint})
}
@debug $mediaBreakpoint; 

/**
* calculate the max width based on input
*/
@function calculateMaxWidth($breakpoint){
    $newBreakpoint: calc( #{$breakpoint} - 0.0625em ); // 1px  in em sizing.
    @return $newBreakpoint;
}

但无论我尝试什么，@debug 值都显示为： 48em-0.0625em // 这是无效的，我需要实际结果（在本例中为 47.9375）。 64em // 有效的最小宽度

这是编译好的css：

@media screen and (max-width: calc( 48em - 0.0625 )) {

}

我错过了什么？

【问题讨论】：

为什么在调用自己的函数时要对参数使用字符串插值？这里：$mediaBreakpoint: calculateMaxWidth(#{$mediaBreakpoint})。这没有必要。

标签： sass scss-mixins

【解决方案1】：

经过大量调试，我自己找到了答案。起初我误解了插值。在深入阅读文档后，我注意到我应该包装整个计算而不是仅仅包装变量，因为我在地图表达式中工作。

引自官方 Sass 文档：

几乎可以在 Sass 样式表的任何地方使用插值，将 SassScript 表达式的结果嵌入到 CSS 块中。

我将函数更改为像这样计算，然后 mixin 开始工作。万岁！

$newBreakpoint: #{$breakpoint - 0.0625em};

【讨论】：