mixinの複数の引数を使用していないガードが少ない

Question

私はインターネットを検索し、複数のコードを試しましたが、これを理解することはできません。うまくいけばあなたは救いの手になれます。

問題：mixinに複数の値がある場合、Guardはトリガーされません。 @orange作品や、このガードトリガー：あなたが見ることができるように

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を使用

.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; 
    } 

}