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