- 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を含めておく