创建一个有边界和无边界的 Mixin

Question

我正在尝试创建一个 Mixin，它从两个变量中提取一个并创建一个填充按钮，或者根据传递的变量创建一个轮廓按钮。

@include button-style($color: red);

// would result in
background-color: transparent;
color: red;
box-shadow: inset 0 0 0 1px red;

@include button-style($bg: red);

// would result in
background-color: red;
color: white;

有没有办法做到这一点？我在这里发疯了，试图找出实现这一目标的最简单方法。这是我到目前为止所得到的。

@mixin button-style($bg: transparent, $color: white) {
  background-color: $bg;
  color: $color;
  @if $color == 'white' {
    box-shadow: inset 0 0 0 1px $color;
  }
}

感谢任何帮助。提前致谢！

Answer 1

添加一个额外的参数并对其进行检查。

@mixin button-style($bg: transparent, $color: white, $border: true) {
  background-color: $bg;
  color: $color;
  @if $border {
    box-shadow: inset 0 0 0 1px $color;
  }
}

.foo {
  @include button-style;
}

.bar {
  @include button-style($border: false);
}

输出：

.foo {
  background-color: transparent;
  color: white;
  box-shadow: inset 0 0 0 1px white;
}

.bar {
  background-color: transparent;
  color: white;
}

或者，您可以使用空值：

@mixin button-style($bg: transparent, $color: white, $border: inset 0 0 0 1px $color) {
  background-color: $bg;
  color: $color;
  box-shadow: $border;
}

.foo {
  @include button-style;
}

.bar {
  @include button-style($border: null);
}

Answer 2

这似乎对我有用。我已经设置了working example over here。唯一的缺点是我必须将 transparent 绑定到一个变量，如下所示：

$transparent: transparent;

@mixin button-style($bg: $transparent, $color: white) {
  background-color: $bg;
  color: $color;
  @if $bg == $transparent {
    box-shadow: inset 0 0 0 1px $color;
  }
}

.button-pri {
  @include button-style($bg: red);
}

.button-sec {
  @include button-style($color: red);
}

如果可能的话，我想从等式中删除该变量并直接使用if $bg == 'transparent { ...，但if 语句似乎不适用于字符串。

更新

感谢@KreaTief，显然我不需要使用变量。下面更新了答案：

@mixin button-style($bg: transparent, $color: white) {
  background-color: $bg;
  color: $color;
  @if $bg == transparent {
    box-shadow: inset 0 0 0 1px $color;
  }
}

.button-pri {
  @include button-style($bg: red);
}

.button-sec {
  @include button-style($color: red);
}