Less guard not working with multiple arguments from mixin

Question

I have searched the internet and try multiple codes but can't figure this one out. Hopefully you can be the helping hand.

The problem: Guard is not triggered when mixin have multiple values.

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

  }

As you can see I use button() mixin, @style: @orange works and triggers this guard:

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

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

}

But when I use this:

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

The guard isn't triggered anymore, although the button @style is still @orange. Could anyone explain this behavior?

Answer 1

Ok, after some digging, it seems that mentioning all arguments of a mixin function is the way to go. Instead of just .button(@style) I changed it to .button(@style, @width) and the guard is functioning correctly for now.

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

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

}