Sass / scss 'mixin as function', чтобы вернуть строку с параметрами?

Question

У меня есть Mixin в LESS с параметрами, которые возвращают строку.Я использую этот миксин для расчета адаптивных свойств, таких как поля, отступы и размер шрифта между двумя заданными размерами.Мне нужна помощь, чтобы преобразовать его в scss.

МЕНЬШ МЕНЬШ:

@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 миксин в SCSS.Миксины выводятся только для вывода 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);
}

Вот документация о interpolation от Sass