薩斯：功能來映射可變數量的輸入

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

而且一切都很棒RY。有什麼方法可以在一次調用中轉換未知數量的輸入？例如：

.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

什麼你要找的是一個地圖功能（在其他語言中常見到列表中的每一項應用功能），但薩斯不提供一個。但是，您可以使用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; 
}