Sass 仅在有效数字上添加单位

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

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

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

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

从上面的代码片段中可以看出，我正在尝试将

1px

与

“

相乘，这将输出一条错误消息。应该如此！但我希望这句空话能被退回。有没有其他方法可以实现这一点？

您有两种选择：

检查传入的值的类型 循环浏览列表 这是一个更好的解决方案，因为它将允许您优雅地处理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;
}

您有两种选择：

检查传入的值的类型 循环浏览列表 这是一个更好的解决方案，因为它将允许您优雅地处理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;
}

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

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

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

在这里，我将其与默认值（一个空字符串）进行比较，如果不是，则返回计算结果；如果不是，则返回

null

。如果返回空字符串，将导致CSS错误。

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

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

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

---

在这里，我将其与默认值（一个空字符串）进行比较，如果不是，则返回计算结果；如果不是，则返回

null

。如果返回空字符串，将导致CSS错误。

Wow！我使用了交替循环。比我的方法好多了。工作得很好！谢谢哇！我使用了交替循环。比我的方法好多了。工作得很好！谢谢