bootstrap-sass を使って Twitter Bootstrap をカスタマイズ

RAILS_ROOT/vendor/assets 下に Bootstrap 一式を放り込んで使っていたんだけど、 このやり方だと Bootstrap のスタイルをカスタマイズするとき面倒なことに気付いた。

上書きする CSS を書く?ありえない。 Bootstrap 公式のカスタマイズページを使う? 変更を確認するためにファイルを置き換えるのが面倒。

ブラウザで開発中の画面を見ながらカスタマイズしたい。 書くコードの量は少ないほうが良い。 一箇所変更するだけで関連する箇所がまとめて変更されるような…。 それ、Sass で出来るじゃないか。 というわけで、bootstrap-sass を使うことにした。

Rails は Sass をサポートしているので、Gemfile に

gem 'bootstrap-sass'

を追加し、 RAILS_ROOT/app/assets/stylesheets/bootstrap_load.css.scss を作成。

/* bootstrap-sass の変数を上書き */
$navbarText:                  #ffffff;
$navbarBrandColor:            #ffffff;
$navbarLinkColor:             #ffffff;
$navbarLinkColorActive:       #ffffff;
$navbarLinkColorHover:        #ffffff;
$navbarBackground:            #673412;
$navbarBackgroundHighlight:   #3a1703;
$navbarLinkBackgroundActive:  #673412;

@import "bootstrap";
@import "bootstrap-responsive";

あと、application.css に書いていた、bootstrap を require している部分は削除。 これだけで簡単に navbar をカスタマイズできた。

f:id:griefworker:20130328223541p:plain

変数を上書きしている部分は、増えてきたら別ファイルに切り出したほうが良いな。 Sass 便利だ。積極的に使っていこう。