HappyLifeCSSに関するネタを中心に色々書いてます。(火)SassTweetちょっと間が開いてしまいましたが、今回はSCSSファイルの分割に関してです。通常のCSSの場合は、分割した複数のファイルを読み込み用の「import.css」みたいなファイルを用意して管理することが多いかと思います。head要素内に各CSSファイルを読み込んだりしますよね。これだと分割するファイルが多くなればなるほど、読み込むごとにHTTPリクエストとその読み込みがブラウザで行われるため、Webサイトの読み込みが遅くなってしまうって問題があります。体感速度的にどの程度影響があるかはアレですが。それでも、CSSファイルを1つにすることで、ちょっとでも表示が早くなるかも知れないならやって損は無い訳ですが、それで管理面で問題が生じてしまうのも困ったちゃんなので、分割するCSSは必要最低限にしていることが多いかと思います。言った問題も、Sassなら分割したSCSSファイルを一つのCSSファイルとして吐き出してくれるので解決します。通常、ファイルを分割する際は単純にファイル名が違う複数のファイルを読み込みますが、Sassの場合はちょっと違っていて、アンダーバー「_」から始まるファイル名にする必要があります。「_reset.scss」「_module.scss」「_print.scss」って感じです。CSSファイルには変換されないため、最終的にCSSファイルとして変換したいメインのSCSSファイルから読み込みます。読み込み分割したファイルを読み込むには、メインのSCSSファイル内に次のように記述すればOKです。"mixin";この際、アンダーバーと拡張子は省略することが出来ます。複数ファイルを一度に読み込むには次のように記述することで可能です。"mixin";分割したファイルが多くなると可読性が落ちてしまう場合もあるので、1ファイル毎に書くなど、その辺りは各自の好みとかで宜しいかと。ちなみに、階層が違う場合は普通にディレクトリ名を指定すればOKです。"contents/blog";みたいな感じです。ファイル内のどこに記述しても良いので、印刷用のスタイルだけ最後に読み込むとかって場合にも次のような感じで使っていけます。"print";そんな感じでと言う感じで、Sassならファイル分割を自由にやっても最終的に一つのCSSファイルになるため、複数の人が同じサイトをコーディングする場合などにも活用できますね。分割したファイル名は変換されたCSSには影響がないため、作業用で「_hira.scss」とかにしてても問題が有りません。大規模なサイトで後からスタイルがじわじわと追加されていくと、かなりカオスな事になりがちです。*/みたいな超絶カッコ悪い事をしなくても済むわけです!この読み込みもかなり強力な機能の一つかなーと思うのでうまく活用していきたいですね。「Web制作者のためのSassの教科書」の改訂2版が発売しました。́)ゞそろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。Sassの教科書で一番読んで欲しいところ。Spaceが3月1日にオープンしますCSSSってコワーキングスペース運営するです。excluded.↑上に行くよ。