css - Less guard 不处理 mixin 的多个参数

Question

我已经在互联网上搜索并尝试了多种代码，但无法弄清楚这个。希望您能助一臂之力。

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

无按钮

  /* 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() 混合，@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

好的，经过一番挖掘，似乎提及混合函数的所有参数是可行的方法。我将它改为 .button(@style, @width) 而不是仅仅 .button(@style) 并且 guard 现在正常运行。

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

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

}