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没有提供。但是，当您遍历整个列表时，可以使用call()函数从Sass 3.3开始编写自己的。

@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;
}

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

1 个答案: