Question

我尝试创建一个灵活的mixin，您可以在同一个mixin中设置填充或边距的空间

我把它放在波旁威士忌上进行定位

mixin setSpace($setSpace: padding, $setSpaceValues: 0 0 0 0){
  @if type-of($setSpace) == list{
       $setSpaceValues :$setSpace;
      $setSpace: padding;
      }
        $top: nth($setSpaceValues, 1);
        $right: nth($setSpaceValues, 2);
        $bottom: nth($setSpaceValues, 3);
        $left: nth($setSpaceValues, 4);

        @if  unitless($top and $right and $bottom and $left){

        #{$setSpace}:  $top+px $right+px $bottom+px $left+px ;

       }
}

但是我试图获得灵活性，以便能够添加单个单位，以便我也可以这样做

.test{
   @include setSpace(margin, 10% 0 5 5);
}

Answer 1

您可以在每个值上使用Sass if() function来检查unitless ...也许定义一个执行此操作的函数 - 也许就是这个方向：

@function setUnit($val){
  @return if(unitless($val), $val * 1px, $val);
}

然后你可以在你的mixin中使用它：

@mixin setSpace($setSpace: padding, $setSpaceValues: 0 0 0 0){
  @if type-of($setSpace) == list{
    $setSpaceValues: $setSpace;
    $setSpace: padding;
  }

  $top: nth($setSpaceValues, 1);
  $right: nth($setSpaceValues, 2);
  $bottom: nth($setSpaceValues, 3);
  $left: nth($setSpaceValues, 4);

  #{$setSpace}:  setUnit($top) setUnit($right) setUnit($bottom) setUnit($left) ;
}

DEMO

此外，您还可以在循环中设置值（ - 更灵活，更短）：

@mixin setSpace($setSpace: padding, $setSpaceValues: 0 0 0 0){
  @if type-of($setSpace) == list{
    $setSpaceValues: $setSpace;
    $setSpace: padding;
  }
  $out: ();
  @each $val in $setSpaceValues{
    $out: append($out, if(unitless($val), $val * 1px, $val));
  }
  #{$setSpace}: $out;
}

DEMO

希望这会给你一些想法。

Answer 2

你的mixin可能更适合作为一个功能：

@function spacing($values: 0) {
    $collector: ();

    @each $v in $values {
        $collector: append($collector, if(unitless($v) and $v != 0, $v * 1px, $v));
    }

    @return $collector;
}

.test{
    margin: spacing(10% 0 5 5);
}

输出：

.test {
  margin: 10% 0 5px 5px;
}

如果您正在做的只是转换单个值，那么当您稍后再回来阅读代码时，函数会更加清晰。

如何检查具有多个值SASS的无单位变量

2 个答案: