-4 
@btn-font-weight:     normal;
@btn-default-color:   @brand-primary;
@btn-default-bg:      .#gradient.vertical(@brand-primary; @brand-secondary; 0%; 10%);   
@btn-default-border:  #ccc;
4

1 に答える 1

10

LESS mixin の出力を変数に保存することはできません。ミックスインは、ルールに混在させることを意図しています。LESSの詳細については、こちらをご覧ください。

さらに、ブートストラップは、プロパティを設定するためにミックスイン@btn-default-bgなどで使用される色を保持するため、グラデーションを保持できません。.button-variant()background-color

したがって、グラデーション背景用のブートストラップ mixin を使用してボタンを作成するには、次の行に沿って何かを試すことができます (ここでは、ボタンで使用できる単純なグラデーション ボタン mixin を作成します)。

.gradient-button(@color, @borderColor, @startColor, @endColor, @startPercent, @endPercent, @degradeColor: @startColor) {
  color: @color;
  border-color: @borderColor;
  background-color: @degradeColor;
  #gradient > .vertical(@startColor, @endColor, @startPercent, @endPercent));
  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners

  &:hover,
  &:active {
    color: @color;
    border-color: darken(@borderColor, 12%);
    background-color: darken(@degradeColor, 8%);
    #gradient > .vertical(darken(@startColor, 8%), darken(@endColor, 8%), @startPercent, @endPercent);
    .reset-filter();
  }
}

次に、この mixin をボタンで次のように使用できます。

/* your default button */
.btn-default {
  .gradient-button(@brand-text-color, @brand-border, @brand-primary, @brand-secondary, 0%, 10%);
}

または、theme.less ファイルで.btn-styles()mixinがどのように設計され使用されているかを確認できます。

mixin は、danger、success、info ボタンなどの他のボタンで再利用できます。ただし、同じ方法で (ミックスインを作成する代わりに)、ボタン ルールで直接ブートストラップ グラディエント ミックスインを使用することができます (ボタンを 1 つだけ定義する場合)。

さらにアイデアを得るには、button.lessファイルまたは mixins.less を調べて、.button-variants()mixinをチェックし、上記の mixin にクラスなどを追加する方法を確認してください.disabled。

于 2013-11-11T10:21:36.483 に答える