Less & Sass Advent calendar 2011の11日目です。
Twitterが提供しているTwitter Bootstrapの使い方についてです。
（僕が利用しているのが、SassのためSass Twitter Bootstrapでの説明となります。）
CSSのフレームワーク・ライブラリというと、今までにも
- Brueprint
- YUI
- YAML
- 960 Grid System
など、いろいろ存在していましたが、基本的に、HTMLにクラスを追加して利用するのが、通常の使い方になります。
Twitter Bootstrapに関しては、Less(Sass)でつくられていることから、同梱のcssファイルをそのまま使うのではなく,scssファイルから、自分でcssファイルを作成することにより、もう少し便利な使い方ができると思います。
（当然、今までのフレームワーク的な使い方も可能です。）
ブラウザ互換の対応
Sassの便利な使い方として、ベンダープリフィックスをまとめたmixinを作っておけば、 @inclueするだけで、利用できるという点がありますが、Twitter Bootstrapには、あらかじめ、ベンダープリフィックスに対応したmixinが /lib/mixins.scssに用意されていますので、直接利用することが可能です。
// Gradients
@mixin horizontal-gradient ($startColor: #555, $endColor: #333) {
background-color: $endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
}HTMLを変更せずに利用が可能になる
今までのフレームワークの場合、 htmlファイルに該当のclassを追加して利用するのが、一般的な使い方でしたが、 Twitter Bootstrapの場合、 extendの機能を利用して,フレームワークで指定されているclassを追加することなく、利用が可能になります。
// Base .btn styles
.btn {
// Button Base
cursor: pointer;
display: inline-block;
@include vertical-three-colors-gradient(#fff, #fff, 25%, darken(#fff, 10%));
padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
color: #333;
font-size: $basefont;
line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
@include border-radius(4px);
$shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
&:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
……
このようなスタイルでも、HTMLに、class="btn"と追加しなくても、
@extend .btn
とすることで、スタイルを設定することができます。
SASS/LESS のフレームワーク
上記のようにTwitter Bootstrapは、同梱のcssファイルではなく、scssファイルを使うことにより、少しだけ便利に利用することもできるで、ぜひ使ってみてください。
また今後、SassやLessベースのフレームワークやライブラリがいろいろ出てくるのではないでしょうか？
