Question

我需要一个SCSS mixin来做边框。在此混入中，$position变量应该是可选的：

@mixin border($position, $width, $style, $color) {
  @if $position {
    border-#{$position}: $width $style $color;
  } @else {
    border: $width $style $color;
  }
}

这是必要的，以便我可以在以下两种情况下使用它：

.box {
   @include border('bottom', 1px, solid, #999) /*with position*/;
}

和

.button {
    @include border(1px, solid, #999); /*without position*/
    @include border-radius(9999999px);
    padding: .5rem .75rem;
    font-size: 14px;
}

对于第二种情况，编译器将引发错误：

Mixin border is missing argument $color.

我在做什么错了？

Answer 1

您可以将默认参数用于$ position。我使用false布尔值作为默认变量。

@mixin border($width, $style, $color, $position: false) {
  @if $position {
    border-#{$position}: $width $style $color;
  } @else {
    border: $width $style $color;
  }
}

您可以这样使用：

.button {
  @include border(1px, solid, #999);
  padding: 0.5rem 0.75rem;
  font-size: 14px;
}

如果不发送任何参数，它将进入其他状态（如上）。如果发送位置参数，它将进入if状态。像这样：

.button {
  @include border(1px, solid, #999, right);
  padding: 0.5rem 0.75rem;
  font-size: 14px;
}

此外，请记住，可选参数必须位于强制参数之后。这是一条规则。

无法使用可选参数进行SCSS混合的原因是什么？

1 个答案: