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);
}

使用和不使用边框创建Mixin

2 个答案: