ちょっと間が開いてしまいましたが、今回はSCSSファイルの分割に関してです。
通常のCSSの場合は、分割した複数のファイルを読み込み用の「import.css」みたいなファイルを用意して管理することが多いかと思います。
もしくは、head要素内に各CSSファイルを読み込んだりしますよね。
ただ、これだと分割するファイルが多くなればなるほど、読み込むごとにHTTPリクエストとその読み込みがブラウザで行われるため、Webサイトの読み込みが遅くなってしまうって問題があります。
まぁ体感速度的にどの程度影響があるかはアレですが。
それでも、CSSファイルを1つにすることで、ちょっとでも表示が早くなるかも知れないならやって損は無い訳ですが、それで管理面で問題が生じてしまうのも困ったちゃんなので、分割するCSSは必要最低限にしていることが多いかと思います。
そう言った問題も、Sassなら分割したSCSSファイルを一つのCSSファイルとして吐き出してくれるので解決します。
SCSSファイルの分割方法
通常、ファイルを分割する際は単純にファイル名が違う複数のファイルを読み込みますが、Sassの場合はちょっと違っていて、アンダーバー「_」から始まるファイル名にする必要があります。
例えば「_reset.scss」「_module.scss」「_print.scss」って感じです。
これら、分割した部分的なSCSSファイルをpartial と呼びます。
このpartial は、CSSファイルには変換されないため、最終的にCSSファイルとして変換したいメインのSCSSファイルから読み込みます。
partial の読み込み
分割したファイルを読み込むには、メインのSCSSファイル内に次のように記述すればOKです。
@import "setting"; @import "reset"; @import "mixin";
この際、アンダーバーと拡張子は省略することが出来ます。
また、複数ファイルを一度に読み込むには次のように記述することで可能です。
@import "setting", "reset", "mixin";
分割したファイルが多くなると可読性が落ちてしまう場合もあるので、1ファイル毎に書くなど、その辺りは各自の好みとかで宜しいかと。
ちなみに、階層が違う場合は普通にディレクトリ名を指定すればOKです。
@import "contents/company"; @import "contents/blog";
みたいな感じです。
このSassの @import は、ファイル内のどこに記述しても良いので、印刷用のスタイルだけ最後に読み込むとかって場合にも次のような感じで使っていけます。
// リセット
@import "reset";
// メインのスタイルがこの辺に
body {
}
#main {
}
// 印刷用スタイル
@import "print";
そんな感じで
と言う感じで、Sassならファイル分割を自由にやっても最終的に一つのCSSファイルになるため、複数の人が同じサイトをコーディングする場合などにも活用できますね。
分割したファイル名は変換されたCSSには影響がないため、作業用で「_hira.scss」とかにしてても問題が有りません。
また、大規模なサイトで後からスタイルがじわじわと追加されていくと、かなりカオスな事になりがちです。
さらに追加する人が違う場合など、コメントで、、、
/* ▼▼ 2012.1.24 追加 by 平澤 ココから ▼▼ */
.hoge {
}
/* ▲▲ 2012.1.24 追加 by 平澤 ココまで ▲▲ */
みたいな超絶カッコ悪い事をしなくても済むわけです！
この読み込みもかなり強力な機能の一つかなーと思うのでうまく活用していきたいですね。