読者です 読者をやめる 読者になる 読者になる

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が生成されているはず。
f:id:y_310:20100906005347p:image