Меньше стража, не работающего с несколькими аргументами из mixin

Question

Я искал интернет и пробовал несколько кодов, но не могу понять, что это. Надеюсь, вы можете помочь.

Проблема: Guard не запускается, когда 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(); 
} 

Защитник больше не запускается, хотя кнопка @style все еще @orange. Может ли кто-нибудь объяснить это поведение?

Answer 1

Хорошо, после некоторого копания кажется, что упоминание всех аргументов функции mixin - это путь. Вместо просто .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; 
    } 

}