sass-rails-bootstrap を使ったら職が(ry

rails

twitter-bootstrap-railsがとても便利そうです。generatorでレイアウトの雛型が用意されてるのもすばらしい。
でもやっぱりLESSじゃなくてSassを使いたいんですよね。

ということでsass-rails-bootstrapというのを見つけたので、使えるかどうか同じ手順で試してみました。

railsアプリを作りましょう。

rvmでgem set作ります。

rvm --create 1.9.3-p125@tbrsample

railsアプリ生成します。

gem install rails --no-ri --no-rdoc

rails new tbrsample

twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - pblog

同じようにやります。

gemを指定しましょう。

gem "twitter-bootstrap-rails"

のかわりにこう。

gem 'sass-rails-bootstrap', :git => 'https://github.com/voidseeker/sass-rails-bootstrap.git'

bootstrapをgenerateしましょう。

必要なjsやcssをapp/assets配下に配置します。

generatorはないので、ソース GitHub - ppworks/tbrsample を参考にして、こんな感じにファイルを作成。

/* app/assets/stylesheets/bootstrap.css.sass */
@import "twitter/bootstrap/variables"
@import "twitter/bootstrap/bootstrap"
@import "twitter/bootstrap/responsive"

たぶんカスタマイズしたいときはこの中に書けばOK？

レイアウトファイルを作成しよう。

layouts/application.html.erbにひな形のレイアウトを作りましょう。 ここでは、スマートフォン対応もしたいなーと思うので、可変レイアウトにしようと思います。

これもソース tbrsample/application.html.erb at master · ppworks/tbrsample · GitHub から丸コピペ。

画面を見てみよう。

ここまででtwitter bootstrapの準備はokなので実際に画面を見てみましょう。 というわけで、とりあえず適当にページを作ります。

同じようにやります。
できました。


カスタマイズは試してません。

感想

やっぱり元のtwitter-bootstrap-railsのほうが便利ですね。とくにSassにこだわりがなければLESSでもいいし。
あと、Sass移植とは言ってもSCSSのものは他にいろいろあるようなので、そっちでもいいと思います。たぶんもっと使いやすいものがある可能性大。

@ppworks さんに勝手に便乗して書かせてもらいました。ありがとうございました！

ソース