3

我很难理解 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; 
}

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

谢谢

4

2 回答 2

3

您可以使用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; 
}
于 2018-12-05T14:36:13.207 回答
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)。

于 2018-12-05T14:25:54.633 回答