Scss 函数不返回计算值

Posted 2023-03-07

【中文标题】Scss 函数不返回计算值

【英文标题】：Scss function returns no calculated value

【发布时间】：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)。这没有必要。

【参考方案1】：

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

引自官方 Sass 文档：

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

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

$newBreakpoint: #$breakpoint - 0.0625em;