css - 你如何检查具有多个值 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 ;

       }
}

但我尝试获得灵 active ，以便能够向其中添加单个单元，这样我也可以这样做

.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

希望这能给你一些想法。