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 をカスタマイズできた。
変数を上書きしている部分は、増えてきたら別ファイルに切り出したほうが良いな。 Sass 便利だ。積極的に使っていこう。