Sass + Railsの基礎

  • 25
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。
  • Railsではアセットパイプラインで.scssを自動的にコンパイルしてくれるのでコンパイルを意識する必要は無い
  • /app/assets/stylesheetsフォルダに配置するだけ
  • オンラインでコンパイル動作を確認するにはここを使う http://www.sassmeister.com/

Sassの特徴

  • ネストが使える
  • &:hoverのようにすると擬似要素に出来る
  • 変数定義・変数展開が出来る
  • @mixinでスタイル定義の再利用も可能
  • @extendを使うと既にあるスタイルを再利用できる
  • @importは外部cssをインポートできる(.scssは省略しても可)

コンパイルの流れ

  • application.cssからコンパイルされる
  • .css.scss, .scssどちらでもコンパイルされる
  • ファイル名順でコンパイルされる
  • reset.cssを最初に読み込みたい時はファイル名を気をつける
  • sass-railsのgemがデフォルトで入っており、これの恩恵
  • アセットパイプラインの処理の流れはココ読む http://rails.hatenadiary.jp/entry/2013/03/03/125801

プリコンパイルについて

  • development環境ではapp/assets/stylesheets配下のスタイルファイルはページが読み込まれる
  • production環境ではスタイルファイルを1つに結合して1つのapplication.cssとして読み込まれるようにプリコンパイルしておく
rake assets:precompile
  • この結果、public/assets/に結果のapplication.cssが生成される。JS関係のapplication.jsについても同様
  • 一度プリコンパイルして、public/assets配下にできてしまうとそれを読み込んでしまうので再度プリコンパイルしないと有効にならない
  • public/assets配下に出来てしまったファイルを消す時は以下のコマンドを実行する
rake assets:clean
  • 開発環境でプリコンパイルされないようにするにはconfig.assets.compress = falseconfig/environment/development.rbに設定しておく
  • .gitignoreにpublic/assets/*tmpを含めておく