Rails3でSassを使う方法
せっかくHamlを使えるようにしたのでSassも使えるようにしたいところ。
とはいってもSassはHamlに同梱されているので前回の記事の手順でインストールまでは既に済んでいます。
設定
config/initializers/sass_config.rbを作成して以下の記述を追加。
#デフォルトのスタイルシートパスを削除 Sass::Plugin.remove_template_location("./public/stylesheets/sass") #app/stylesheetsをSass用のディレクトリに設定 Sass::Plugin.add_template_location("./app/stylesheets") #最小サイズのCSSに変換する Sass::Plugin.options[:style] = :compressed
デフォルトのパスでも問題ないのですが、Sassは.sassファイルから.cssファイルへコンパイルする仕組みのためソースファイルと生成されたCSSの場所を分離しておいたほうがスッキリすると思います。
またSassの変換結果のスタイルは以下のドキュメントに書かれていますので好きなものを設定してください。
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style
動作確認
Sass用のディレクトリとファイルを作成
$ mkdir app/stylesheets $ vim app/stylesheets/sample.sass
以下の記述をsample.sassに追加
h1 :font :size 200% :weight bold :border 16px solid #DD66CC :width 400px :padding 5px p :font-weight bold :border 16px solid #6666DD :width 400px :padding 5px
$ rails server
$ open http://localhost:3000/sample/index
こんな画面が表示されたら動作確認OK。public/stylesheets/sample.cssが生成されているはず。
