仅在有效数字上添加单位

Question

我正在尝试做一个具有可选参数的混合。这是一个简化版本：

@mixin marginCalculator($size, $size2:"") {

    margin: $size * 1px unquote($size2 * 1px);
}

我只是传入数字作为参数。但我只希望第一个是强制性的。如果它只输出数字没问题，但我需要向它添加一个单位。

从上面的代码片段中可以看出，我正在尝试将 1px 与 "" 相乘，这会输出一条错误消息。正如它应该！但我希望空报价被退回。还有其他方法可以实现吗？

Answer 1

您有 2 个选择：

检查传入值的类型

@mixin marginCalculator($size, $size2: "") {
  margin: ($size * 1px) (if(type-of($size2) == number, $size2 * 1px, null));
}

遍历列表

这是一个更好的解决方案，因为它还可以让您优雅地处理 3 值边距。

@mixin marginCalculator($size...) {
  $xs: ();
  @each $s in $size {
    $xs: append($xs, $s * 1px);
  }
  margin: $xs;
}

.foo {
  @include marginCalculator(1);
  @include marginCalculator(1, 2);
  @include marginCalculator(1, 2, 3);
}

或者：

@mixin marginCalculator($sizes) {
  $xs: ();
  @each $s in $size {
    $xs: append($xs, $s * 1px);
  }
  margin: $xs;
}

.foo {
  @include marginCalculator(1);
  @include marginCalculator(1 2);
  @include marginCalculator(1 2 3);
}

输出：

.foo .foo {
  margin: 1px;
  margin: 1px 2px;
  margin: 1px 2px 3px;
}

Answer 2

您可以使用 if() 函数来检查它是否没有值：

@mixin marginCalculator($size, $size2:"") {

    margin: ($size * 1px) if($size2!="", $size2 * 1px, null);
}

在这里，我根据默认值（一个空字符串）检查它，如果不是，则 return 计算，如果是，则 null。如果我们 return 一个空字符串，它会导致 CSS 错误。

仅在有效数字上添加单位

Only add unit on valid number

sass

检查传入值的类型

遍历列表