Rails with Compass で Twitter Bootstrap をつまみ食い

Rails で Asset Pipeline を有効にした状態で、Compass を使いつつ Twitter Bootstrap を部分的に使う方法です。

Twitter Bootstrap を使えるようにする gem はいろいろありますが、twitter-bootstrap-rails は LESS のままなので NG。sass-twitter-bootstrap-rails は、Compass と @mixin がかぶるため NG。そこで compass_twitter_bootstrap の出番になります。

Gemfile

gem 'compass_twitter_bootstrap'
gem 'compass-rails'

javascript は、vendor/assets/javascript 以下にあるので、個別に使うのも、全部取り込むのも簡単ですが、stylesheet はちょっとやっかい。github をみると、

applicaion.scss

@import "compass_twitter_bootstrap"

しかのってませんが、これだと根こそぎ適用され、部分的に使いたい場合、スタイルの調整が大変です。

たとえば、Popover のみを使う場合は、以下のようにします。

applicaion.scss

@import "compass_twitter_bootstrap/mixins.scss";
@import "compass_twitter_bootstrap/variables.scss";
@import "compass_twitter_bootstrap/popovers.scss";

mixins.scss と variables.scss は、共通定義なものが入っているので、これを含めて import してから、調整していく感じがよさそうです。javascript 側は、

application.js

//= require bootstrap-tooltip
//= require bootstrap-popover

こんな感じです。たまたま、Popover には依存関係がありましたが、Twitter Bootstrap のサイトに書いてあるので、問題ないでしょう。

参考資料

余談

ここ でカスタマイズした CSS 使った方がはやいかも。。。