Question

我已经在互联网上搜索并尝试了多个代码，但无法解决这个问题。希望你能伸出援助之手。

问题：当mixin有多个值时，不会触发Guard。

Button.less

  /* CTA Box */
  &ctabox {
    .inline-box(@lightergrey);

    &__header {
      display: inline-block;
      margin: 5px 0;
      .font(@size: 18px, @weight: 700);
    }

    &__button {
      .button(@style: @orange);
      .button-icon-right();
    }

  }

正如你所看到我使用button（）mixin， @style：@orange 工作并触发这个警卫：

.button(@style) when (@style = @orange) {
  /* Rendered mixin: Button @style when @orange */
  color: #FFF;

  &:hover, &:focus {
    background: @lightorange;
    color: #FFF;
  }

}

但是当我使用它时：

&__button {
  .button(@style: @orange, @width: 100%);
  .button-icon-right();
}

警卫不再被触发，虽然按钮@style仍然是@orange。有谁能解释这种行为？

Answer 1

好的，经过一些挖掘，似乎提到mixin函数的所有参数都是要走的路。而不仅仅是.button（@style）我把它改成了.button（@ style，@ width）并且守卫现在正常运作。

..\W*(.+)\W*..

较少的警卫不使用mixin的多个参数

1 个答案: