Question

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

LESS Mixin：

@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

sass / scss'mixin as a function'返回带有参数的字符串？

1 个答案: