Sass:映射可变数量输入的函数

Question

假设我在SCSS中有以下内容：

$browser-context: 16;
@function em($size, $context: $browser-context) {
    @if (unitless($size)) { $size: $size * 1px; }
    @if (unitless($context)) { $context: $context * 1px; }
    @return ($size / $context) * 1em;
}

有了这个，我可以写以下内容：

.test { padding: em(20px); }

它将输出以下CSS：

.test { padding: 1.25em; }

一切都很好。有没有什么方法可以在一次调用中转换未知数量的输入？例如：

.text { padding: func(20px 30px); }

以及

.text { padding: func(20px 30px 10px); }

将输出

.text { padding: 1.25em 1.875em; }

以及

.text { padding: 1.25em 1.875em 0.625em; }

分别。我只是希望避免这样做：

.text { padding: em(20px) em(30px) em(10px); }

Answer 1

您想要的是一个map函数（通常在其他语言中找到，用于在列表中的每个项上应用一个函数），但Sass没有提供。但是，您可以从Sass 3.3开始编写自己的代码，方法是在循环整个列表时使用call()函数。

@function map($fun, $list) {
    @for $i from 1 through length($list) {
        $list: set-nth($list, $i, call($fun, nth($list, $i)));
    }
    @return $list;
}

用法：

$bar: 10px 20px 30px;
@function times2($i) {
    @return $i * 2;
}
.foo {
    padding: map('times2', $bar); // note the quotes around the function name
}

输出：

.foo {
  padding: 20px 40px 60px;
}