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

Posted 2023-03-06

【中文标题】如何知道我使用 SCSS 在函数中传递了多少变量参数

【英文标题】：How to know how many Variable Arguments I passed in my function using SCSS

【发布时间】：2019-05-07 02:52:12

【问题描述】：

我很难理解 SCSS 变量参数。 如here 所示，很容易理解您可以添加多个参数。

但我不明白如何使用地图来做到这一点。

例如：

我有这张地图：

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

没有地图也可以轻松搞定，但有了地图怎么办？

谢谢

【参考方案1】：

你可以这样做：

@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）。

【参考方案2】：

您可以将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; 

【讨论】：

我不知道append，太好了！

也不知道！喜欢它，谢谢。