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

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

您可以对每个值使用Sassif()函数来检查unitless。。。也许可以定义一个这样做的函数——也许是朝着这个方向：

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

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

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

演示

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

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

演示

希望这能给你一些想法。

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

如果你所做的只是转换一个值，那么当你稍后回来阅读代码时，函数会让你更清楚地看到这一切。