Sassで@import

CSSで使える@importを拡張したSassの「@import」について見ていきます。
Sassの「@import」はファイルを複数に分割してメンテナンス性を高めたり、ミックスインをパーシャルファイルにしてライブラリ的に扱ったりと、Sassを利用して得られる最も重要な恩恵のひとつです。
※ パーシャルファイル = Sassで分割されたファイル

@importのルール

基本的な@importのルールはCSSと同じですが、条件によってSassの@importか、CSSの@importかが分かれます。
CSSではインポートすると、@importで指定したファイルを読み込みますが、Sassの場合はコンパイル時にインポートしたSassファイル内にコードが展開され、ひとつのCSSファイルとして出力してくれます。

ファイルの重複？

SassファイルからSassファイルのインポートする場合、インポートされる側はインポートされながらも、自身もCSSファイルを出力します。
多くの場合は、インポートしたSassファイルのCSSは不要になるため、インポートしたSassファイルのCSSファイルを生成しないようにする必要があります。

CSSを生成しない

インポートするSassのファイル名の先頭に「_（アンダースコア）」を付けることでコンパイルしてもCSSを生成しなくなります。
この複数のファイルに分割する機能をパーシャル(partial)といいます。
※パーシャルは「一部の、部分的な、」的な意味です。

パーシャルファイルを@importする

CSSを生成しないパーシャルファイルをインポートする場合は、先頭の_（アンダースコア）と拡張子省力してファイルを指定します。
例えば「_default.scss」をインポートするには次のように書きます。

@import "default";

複数のパーシャルファイルを読み込みにはカンマ区切りで指定することもできます。「_default.scss」、「_mobile.scss」、「_print.scss」をインポートするには次のように書きます。

/* 複数のファイルをインポート */
@import "default";
@import "mobile";
@import "print";

/* カンマ区切りで指定できる */
@import "default", "mobile", "print";

@importをネストする

Sassでは、ルールセット構造内で@importを利用することもできます。
例えば、「_mobile.scss」を画面サイズ37.5em以下の場合に読み込む場合は次のように書きます。

@media screen and (max-width:37.5em) {@import "mobile"}

おわりに

前回のネスト機能と今回のパーシャル機能までが、Sassの基本的な使い方となります。（と思っている？）
まずはSassのネストとパーシャルを通じてSassに触れてみれば、CSS記法には戻れなくなるくらいSassが便利であることがおわかりいただけると思います。

次回は「@extend」や「@mixin」などの高度な機能に触れていきましょう。

次回「 @extend」