Question

我想为Bootstrap源创建一个聪明的mixin（mixin-＆gt; buttons.less）。

我所拥有的内容如下：

减：

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  /* this variables must be used when I have parent's  class="invert"*/
  color: @background;
  background: @color;
  border-color: @background;
  /* end */

  /*when not - use variables in the beggining of mixin */

}

我如何看待使用此mixin

.btn-primary,
.btn-primary-invert{
    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}

我可以做我想做的事吗？我知道可以用较少的警卫来完成，但不了解如何使用它。有人有什么想法吗？

Answer 1

最简单的方法是使用父选择器（&），如下面的代码段所示，忘记使用警卫。这里mixin默认为所有按钮产生正常和反转状态。如果您希望这两种状态适用于所有按钮，则可以使用此选项。

.button-variant(@color; @background; @border) {
  &{
    &:hover, &:active{
      color: @color;
      background-color: @background;
      border-color: @border;
    }
  }
  &-invert{
    &:hover, &:active{
      color: @background;
      background: @color;
      border-color: @background;
    }
  }
}

.button-primary{
  .button-variant(#000; #fff; #777);
}

编译时的上述代码段会产生以下CSS：

.button-primary:hover,
.button-primary:active {
  color: #000000;
  background-color: #ffffff;
  border-color: #777777;
}
.button-primary-invert:hover,
.button-primary-invert:active {
  color: #ffffff;
  background: #000000;
  border-color: #ffffff;
}

如果您真的想要使用警卫来获取任何偏好（例如，您不想要特定按钮的任何状态），那么您可以使用如下所示的代码段。对于使用防护装置，您需要发送一个额外的参数，该参数指示可以验证防护装置的类型。

.button-variant(@color; @background; @border; @type:normal) {
  & when (@type = normal){
    color: @color;
    background-color: @background;
    border-color: @border;
  }
  & when (@type = invert){
    color: @background;
    background: @color;
    border-color: @background;
  }
}

.button-primary{
  .button-variant(#000; #fff; #777);
}
.button-primary-invert{
  .button-variant(#000; #fff; #777; invert);
}

在mixin中使用警卫

1 个答案: