如何知道我使用SCSS在函数中传递了多少个变量参数

Question

我在理解SCSS变量参数时遇到困难。如图所示，很容易理解您可以添加多个参数。

但我不明白我怎么能用地图做到这一点。

例如：

我有这张地图：

$spacing: (
none: 0px,
micro: 2px,
tiny: 4px,
);

我正在编写一个函数来控制间距：(很可能是大错特错(

@function spacing($value...) {
$chosen-spacing: null;
@if length($value) == 1 {
@if map-has-key($spacing, $value) {
@return map-get($spacing, $value);
}@else {
@error "'#{$value}' doesn't exist in 'spacing map'";
@return null;
}
}@else {
@each $v in $value {
@if map-has-key($spacing, $value) {
$chosen-spacing: map-get($spacing, $value);
}@else {
@error "'#{$value}' doesn't exist in 'spacing map'";
@return null;
}
}
@return $chosen-spacing;
}   
}

我想要的是能够将函数称为：

.blabla {
padding: spacing(none);
margin: spacing (micro, tiny);
}

输出为：

.blabla {
padding: 0px; 
margin: 2px 4px; 
}

没有地图，它可以很容易地完成，但有了地图，我该怎么做呢？

谢谢

Answer 1

您可以将append与单个循环一起使用。

$spacing: (
none: 0px,
micro: 2px,
tiny: 4px,
);
@function spacing($value...) {
$chosen-spacing: null;
@each $v in $value {
@if map-has-key($spacing, $v) {
$chosen-spacing: append($chosen-spacing , map-get($spacing, $v));
}@else {
@error "'#{$value}' doesn't exist in 'spacing map'";
@return null;
}
}
@return $chosen-spacing;
}
.blabla {
padding: spacing(none);
margin: spacing(micro, tiny);
}

这是输出：

.blabla {
padding: 0px; 
margin: 2px 4px; 
}

Answer 2

以下是如何做到这一点：

@function spacing($value...) {
$chosen-spacing: null;
@each $v in $value {
@if($chosen-spacing) {
$chosen-spacing: #{$chosen-spacing + ' '}
};
@if map-has-key($spacing, $v) {
$chosen-spacing: #{$chosen-spacing + map-get($spacing, $v)};
} @else {
@error "'#{$v}' doesn't exist in 'spacing map'";
@return null;
}
}
@return $chosen-spacing;
}

你不需要检查长度，一个简单的循环就足够了。

循环将读取每个参数，并将从映射中获得的值添加到$chosen-spacing变量中。第一个@if检查变量是否已经有值，如果是这样的话，这意味着我们需要在添加下一个值之前添加一个空格(所以我们不会得到2px4px(。