button - クラスのホバー状態を .LESS の他のクラスにインポートする

Question

私のプロジェクトで .less を学習し、twitters ブートストラップを使用するだけです。

フォームを送信するための緑色のボタンが必要な場合は、次のように書く必要があります。

<input type="submit" value="submit" class="btn btn-success" />

しかし、入力タグのクラス属性をスキップできます。

Twitterのブートストラップファイルは変更しません。次のように、default.less ファイルでそれらをオーバーロードします。

button, input[type="submit"]{ .btn; .btn-success; }

しかし、ボタンのホバー状態とアクティブ状態を取得できず、次のようにしようとするとエラーが発生します。

button, input[type="submit"]{/* previus code... */ &:hover{ .btn:hover; }}

私が達成しようとしていることに気付くかもしれません。jqueryまたはjavascriptでこれを実行できることはわかっていますが、元のbootsrapファイルに触れることなく、.lessファイルでこれを実行できます。

score 0 · Accepted Answer

Bootstrap CSS を変更せずにそれが可能かどうかはわかりません。

ブートストラップ CSS をまったく変更できますか? その場合、.btn-hoverクラスを.btn:hoverに追加し、次にに追加できbutton, input[type="submit"]ます。

&:hover {
    .btn-hover;
    .btn-success-hover;
}

score 0 · Accepted Answer

.btn と .btn-success はクラスです。これらのクラスは、buttons.less で定義されています。.buttonBackground という mixins.less から mixin を呼び出します。ボタンに対してこの mixin を呼び出すことができます。

button, input[type="submit"]{
     .buttonBackground(@startColor,@endColor);
}

@startColor と @endColor はボタンのグラデーション用で、ホバー状態は @endColor を使用します。または、variables.less (btnInfoBackgroundHighlight) の色を自分のものに変更できます。または、使用できます

.btn-success{
      &:hover{
           background-color: @yourOwnColor;
      }
}

2 に答える 2