Twitter Bootstrap だとボタンに hover や active に勝手にスタイルをあててくれたりします。
これでカスタム色を作りたい場合 .btn .btn-xxxxx
に backgroud
とかで直接色つけたりなんだりしちゃうと、hover とか active 時のスタイルがよしなな感じになりません。
というわけで拡張してボタンを作りたい場合は、 .button-variant()
という mixin が定義されているのでそれを使います。
引数は、
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
つまり
.button-variant(文字色; 背景色; ボーダー色);
たとえば Facebook ならこう:
@btn-facebook-color: #4c66a4;
.btn-facebook {
.button-variant(lighten(@btn-facebook-color, 50%); @btn-facebook-color; darken(@btn-facebook-color, 20%));
}
そうすると
<a class="btn btn-facebook">Facebookでログイン</a>
とかで使えます。
(ちょっと文字とか違うけどスクリーンショットはこちら↓)