Sass: Function to map variable number of inputs - sass

Question

Suppose I have the following in 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;
}
With this, I can write the following:
.test { padding: em(20px); }
Which will output the following CSS:
.test { padding: 1.25em; }
And everything is hunky dory. Is there any way that I can transform an unknown amount of inputs in one call? For example:
.text { padding: func(20px 30px); }
and
.text { padding: func(20px 30px 10px); }
would output
.text { padding: 1.25em 1.875em; }
and
.text { padding: 1.25em 1.875em 0.625em; }
respectively. I'm just hoping to avoid doing this:
.text { padding: em(20px) em(30px) em(10px); }

Answer 1

What you're looking for is a map function (commonly found in other languages to apply a function on each item in a list), but Sass does not provide one. However, you can write your own starting with Sass 3.3 by using the call() function as you loop over the entire list.
#function map($fun, $list) {
#for $i from 1 through length($list) {
$list: set-nth($list, $i, call($fun, nth($list, $i)));
}
#return $list;
}
Usage:
$bar: 10px 20px 30px;
#function times2($i) {
#return $i * 2;
}
.foo {
padding: map('times2', $bar); // note the quotes around the function name
}
Output:
.foo {
padding: 20px 40px 60px;
}