Twitter Bootstrapをダウンロードして使っていたけどやっぱりカスタマイズしたくなった。それもCompass使ってSassで管理したい。
前提
- Compass使うのでRubyが必要 (Rubyのセットアップは割愛)
- 使うアプリケーションのフレームワークに依存せず単独で使う(Ruby以外のプロジェクトでも使う)
- カスタマイズはcssのみ、javascriptは対象外
Sass版を探す
github.com/twitter/bootstrapはLessファイルで公開されているのでSassにしてくれてる人を探す。
Compass or Twitter Bootstrap? Why Not Bothより
を知る。他にもありそうだけどとりあえず☆の多いマクドナルドさんの方（以後bootstrap-sassと表記)を使う。
環境セットアップ
Compassとbootstrap-sassをインストールする。
gem install compass
gem install bootstrap-sass
rbenvを使っている場合はcompassコマンドを使うためにrbenv rehashしておく
Compassプロジェクトのセットアップ
ディレクトリをTwittter Bootstrapのビルドに合わせる。以下の例はカレントディレクトリに作成する例。
compass create . -r bootstrap-sass --using bootstrap --css-dir css --images-dir img --javascripts-dir js
Compass作成済みのプロジェクトに追加する場合、以下のコマンドで追加することもできる。
compass install bootstrap
--sass-dirも指定できるのでプロジェクトファイルと出力ファイルを分けることも可能。例えば以下のような感じ。
mkdir sass
cd sass
compass create . -r bootstrap-sass --using bootstrap --sass-dir . --css-dir ../web/css --images-dir ../web/img --javascripts-dir ../web/js
デフォルトだと*-dirの値が使われるのでconfig.rb内でhttp_*_pathを指定しておく。
http_stylesheets_path = "/css"
http_images_path = "/img"
http_javascripts_path = "/js"
Twitter Bootstrapのカスタマイズ
bootstrap-sassでは変数が http://getbootstrap.com/2.3.2/customize.html#variables と同じ名前で定義されている。ありがたい。従って、例えば背景を黒にするにはbodyBackground変数を使って以下のように書ける。
$bodyBackground: black;
@import "bootstrap";
( v3から変数名のコーディングルールが変わっているので注意。$bodyBackground → $body-bg など )
ブラウザから確認
compass watchでプロジェクトのディレクトリを指定すればsassファイルの変更を監視してcssファイルを作成してくれる。
compass watch <dir>
bootstrap-sassのデフォルトでは styles.css が出力ファイルになるのでそれをhtml側で指定すればいい。
Javascript
Compass単体だとどうにもならないのでとりあえずTwitter Bootstrapビルド済みのbootstrap.min.jsをそのまま使っている。
bowerでインストールして、Sprocketsをコマンドラインで叩くことを模索中。