css - Sass/scss 'mixin as a function' 返回带参数的字符串？

Question

我在 LESS 中有一个 Mixin，其参数返回一个字符串。我使用这个 mixin 计算两个给定大小之间的响应属性，如边距、填充和字体大小。我需要帮助将其转换为 scss。

LESS 混合:

@minscreensize: 36; // (360px) this is a rem value (without unit)
@maxscreensize: 192; // (1920px) this is a rem value (without unit)

.screenbased-calculation(@minvalue, @maxvalue, @minscreensize, @maxscreensize, @divider: 1, @multiply: 1) {
    @result: calc((unit(@minvalue, rem) + (@maxvalue - @minvalue) * (100vw - unit(@minscreensize, rem)) / (@maxscreensize - @minscreensize)) / @divider * @multiply);
}

用法:

// First value is margin-bottom at mobile res. (12px), second value (20px) is at desktop res.
margin-bottom: .screenbased-calculation(1.2, 2.0, @minscreensize, @maxscreensize)[@result];

更少的输出:

margin-bottom: calc((1.2rem + (2.0 - 1.2) * (100vw - 36rem)/(192 - 36))/1 * 1)

---

我不知道如何将这个 LESS mixin 转换为 SCSS。 Mixin 似乎只输出 css，函数只输出一个数字。

试用SCSS功能

@function screenbased-calculation($minvalue, $maxvalue, $minsc: $minscreensize, $maxsc: $maxscreensize, $divider: 1, $multiply: 1){
    @return calc($minvalue + ($maxvalue - $minvalue) * (100vw - $minscreensize) / ($maxscreensize - $minscreensize) / $divider * $multiply);
}

用法:

font-size: screenbased-calculation($minvalue: 3.2, $maxvalue: 6.4);

SCSS 输出(只是一个字符串，没有给定的参数):

font-size: calc($minvalue + ($maxvalue - $minvalue) * (100vw - $minscreensize) / ($maxscreensize - $minscreensize) / $divider * $multiply); }

提前致谢

Answer 1

这是因为必须对这些变量进行插值。

$minscreensize: 36;
$maxscreensize: 192;

@function screenbased-calculation($minvalue, $maxvalue, $minsc: $minscreensize, $maxsc: $maxscreensize, $divider: 1, $multiply: 1) {
    @return calc(#{$minvalue} + #{($maxvalue - $minvalue)} * #{(100vw - $minscreensize)} / #{($maxscreensize - $minscreensize)} / #{$divider} * #{$multiply});
}

.foo {
  font-size: screenbased-calculation($minvalue: 3.2, $maxvalue: 6.4);
  // output: calc(3.2 + 3.2 * 64vw / 156 / 1 * 1);
}

Here is the documentation about interpolation from Sass