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」をインポートするには次のように書く。
|
1 |
@import "default"; |
複数のパーシャルファイルを読み込みにはカンマ区切りで指定することもできる。
「_default.scss」、「_mobile.scss」、「_print.scss」をインポートするには次のように書く。
|
1 2 3 4 5 6 7 |
/* 複数のファイルをインポート */ @import "default"; @import "mobile"; @import "print"; /* カンマ区切りで指定できる */ @import "default", "mobile", "print"; |
@importをネストする
Sassでは、ルールセット構造内で@importを利用することもできる。
例えば、「_mobile.scss」を画面サイズ37.5em以下の場合に読み込む場合は次のように書く。
|
1 |
@media screen and (max-width:37.5em) {@import "mobile"} |
おわりに
前回のネスト機能と今回のパーシャル機能までが、Sassの基本的な使い方となる。（と思っている）
まずはSassのネストとパーシャルを通じてSassに触れてみれば、CSS記法には戻れなくなるくらいSassが便利であることがおわかりいただけると思う。
次回は「@extend」や「@mixin」などの高度な機能に触れていこう。
次回「 @extend」