Sass + Railsの基礎

• 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 = falseをconfig/environment/development.rbに設定しておく
• .gitignoreにpublic/assets/*とtmpを含めておく