ファイルを分ける

メインとなるscssファイルと、コンパイルされない_から始まるパーシャルファイル（分割ファイル）を作ります。

パーシャルファイルはメインとなるscssファイルで@importし、ひとつのcssファイルとして出力される為いくつ作っても大丈夫です！

私が用意しているファイルは以下になります。

・style.scss・・・メインとなるscssファイル。このファイルがコンパイルされ、できたstyle.cssをHTMLで読み込みます。
・_setting.scss・・・ベンダープリフィックスやサポートするブラウザの設定(制御)をするファイル
・_base.scss・・・サイトのベースとなるスタイルや変数を定義したファイル
・_mixin.scss・・・頻繁に使用するコードをまとめた(@mixinした)ファイル

・_layout.scss・・・サイトのレイアウトとなるスタイルを記述したファイル
・_各ページ.scss・・・各ページ固有のスタイルを記述したファイル

・
・
・

このように、細かーくファイル分けしています。

メインのstyle.scssは読み込み専用ファイルといった感じで、cssは基本的に記述していません。

ファイルを分けることにより管理しやすいことが一番ですが、
私は最終的なコンパイルでコメントを出力しない為、style.cssにはcssがズララララ！！と。

修正が入った時、ファイルを分けておかないとどの部分を修正するか探すのが大変になるんです。
と、いうことで、ファイルはとことん分けます！

 

ファイルを読み込む（style.scss）

ファイルは好きに分けて良いですが、読み込む順番は気をつけないといけません。
こんな感じ↓

・style.scss

@import "setting";
@import "compass";
@import "compass/reset/";
@import "base";
@import "mixin";
@import "layout";
@import "page";

まず、読み込む時"_"と".scss"は省略可能です。
またファイルは相対パスで指定します。

・最初にsettingファイルを読み込む
settingファイルで出力に制御をかける為（詳しくは【Sass】実践まとめ③）
一番最初、compassより前に読み込みます。

・compass、compass/reset/を読み込む

compassを導入している場合compassを読み込むことができます。
まず、compassを読み込み、compassで定義されているresetを読み込みます。これでリセットは終わり！

・baseファイルを読み込む

サイトのbaseとなるスタイルや変数を定義します。

・mixinファイルを読み込む

独自で定義したmixinファイルを読み込みます。先に読み込まないと@includeできませんからね！

・layoutファイルを読み込む

サイトのレイアウトスタイルを書きます。headerとかfooterとかsidebarとかね！

・各ページ固有のファイルを読み込む

各ページの固有のスタイルを記述したファイルを読み込んでいきます。
"top"とか"about"とか"contact"とかね！

この時点で出力されたstyle.cssはリセットcssのみ記述されている状態となります。

まとめ③に続く