strix01: [rails] sassなtwitter-bootstrapをrailsで使う

2013/01/30

いまさらですが、twitter-bootstrapが便利なことを知りました。
これをRails3に適用するにあたり、せっかくsassでCSSも無駄なく書けているので、sassを使いつつ、twitter-bootstrapも使いたい、という欲求が出てきました。

そんな時は、 bootsrap-sassを使います。
以下、導入手順です。

  gem 'bootstrap-sass'

  $ bundle install

  //= require jquery
  //= require jquery_ujs
  //= require bootstrap
  //= require_tree .

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

これだけで、bootstrapがsassで使えるようになりました。
bootstrap_and_overrides.css.scssでは、bootstrap自身がカスタマイズを許容しているスタイル変数、
具体的にはCustomize - Bootstrapにある変数に対して、

  $bodyBackground: #ddd;
  $textColor:      #333;

のように、オーバライドします。

殊、bootstrapのレイアウト機構は、CSSがスパゲッティになりがちな僕にとっては強力な助けになっています。