1

我想为 Bootstrap 源创建一个聪明的 mixin（mixin->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);
}

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

4

1 回答 1

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);
}
于 2015-06-15T13:35:16.103 回答