创建带边框和不带边框的 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);
}

创建带边框和不带边框的 Mixin

Create A Mixin With and Without Border

css

sass

mixins