较少的保护，不使用来自mixin的多个参数。

Question

我搜索过互联网并尝试了多个代码，但却找不出答案。希望你能成为帮手。

问题:当mixin有多个值时，不会触发保护。

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();
    }

  }

正如您所看到的，我使用@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();
}

守卫不再被触发，尽管按钮“样式”仍然是橙色的。有人能解释一下这种行为吗？

Answer 1

好的，在深入研究之后，似乎提到混合函数的所有参数都是可行的。我不只是使用.button(@style)，而是将其更改为.button(@style，@width)，警卫目前正在正常工作。

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

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

}