RailsチュートリアルのSassについて勉強しました。
Sass は、スタイルシートを記述するための言語であり、CSSに比べて多くの点が強化されています。SassはSCSSというフォーマットに対応しています (.scssという拡張子はSCSSであることを表します)。
SCSSは、厳密な意味で、CSS本体を抽象化したフォーマットです。具体的には、SCSS は CSS に新しい機能を追加しただけで、全く新しい構文を定義したようなものではありません。
RailsのAsset Pipelineは、.scssという拡張子を持つファイルをSassを使って自動的に処理してくれます。このため、custom.css.scssファイルはSassプリプロセッサによって前処理され、その後ブラウザへの配信に備えてパッケージ化されます。
ネスト
通常のCSSの場合、次のように実装してきます。
Sassを使えば次のようにシンプルに書いていくことが可能です。
Railsチュートリアルで作成しているsample_appでは次のCSSがあります。
これは次のように書き換えることができます。
フッターはこうなります。
変数
通常CSSで変数を使うことはできませんが、Sassを使うことで変数に値をセットして共通化が可能になります。
例えば次の処理の場合、colorに#999をセットしている箇所が2箇所あります。
Sassでは次のように書くことで変数として扱うことができます。
これを利用することで次のように書くことができます。
ちなみに、bootstrap-sassというgemを使えば、SCSSでも同様に$grayLightという変数が使えるようになっています。これはBootstrapの変数の一覧表にある次の処理で確認できます。
Bootstrapの変数一覧はこちら
Less · Twitter Bootstrap 2.0.4 Documentation - BootstrapDocs
Sassについての詳細は公式サイトから確認できます。
