Sassのインポート @import

CSSでは@importを使用して、外部のCSSファイルをインポート（読み込む）ことができます。

SassでもCSSと同様に、@importを利用することができますが、Sassの場合は独自の動作を行うようになります。

今回は、Sassのインポート（@import）について紹介します。

1 CSSの@import
2 Sassの@import
3 補足
4 参考

CSSの@import

CSSの@importは、他のスタイルシートから@charsetを除いたスタイルのルールをインポートする（読み込む）ために使用します。

例えば、「header.css」というファイルをインポートする場合は、以下のようになります。

@import url("header.css");

1	@import url("header.css");

ちなみに@importは以下のように記述することもできます。

@import url(header.css);
@import "header.css";
@import 'header.css';

@import url(header.css);

@import "header.css";

@import 'header.css';

CSSでは、@importを使用して外部のCSSファイルを読み込むことで、

例えば、HTMLファイルから「example.css」というCSSファイルを参照している（読み込んでいる）場合、上記の「header.css」を「example.css」から@importを使って読み込むことで、HTMLファイルから「header.css」に記述されているスタイルを使用することができます。

CSSの@importでは、メディアタイプごとにインポートするファイルを切り替えることができます。

@import url("default.css") screen;
@import url("print.css") print;
@import url("tv.css") tv, projection;

@import url("default.css") screen;

@import url("print.css") print;

@import url("tv.css") tv, projection;

参考資料

CSSで定義されているメディアタイプには以下のものがあります。

メディアタイプ	説明
all	すべてのデバイスに適合します。
screen	ディスプレイ（画面）を対象とします。
print	プリンターを対象とします。
braille	点字用ディスプレイデバイスを対象とします。
embossed	点字用プリンターを対象とする。
handheld	モバイル端末（携帯端末）を対象とします。
projection	プロジェクターを対象とします。
speech	音声出力デバイスを対象とします。
tty	固定幅フォント出力デバイスを対象とします。
tv	テレビを対象とします。

Sassの@import

SassでもCSSと同様に@importを使用することができます。

CSSの@importでは、インポート先のファイルを読み込みますが、Sassの@importでは、コンパイルして生成されるCSSファイル内にインポート先のスタイルが展開されます。

SassでインポートするとCSSにコンパイルされますので、インポート先のSassファイルをコンパイルすることで生成されるCSSファイルは、どこからも読み込まれないファイルとして存在することになります。
インポート先のSassをコンパイルして作成されるCSSは不要なので、コンパイルしない（CSSが生成されない）ようにすることが可能です。

Sassの@importでメディアタイプを指定すると、CSSファイルとしてインポートされます。
CSSファイル内でSassファイルをインポートしても動作しませんので、エラーは発生しませんが実質無意味な処理になってしまいます。

補足

Sassの公式サイトでは、@importが廃止予定であることが明言されています。

【原文】
One year after both Dart Sass and LibSass have launched support for the module system or two years after Dart Sass launches support for the module system, whichever comes sooner (1 October 2021 at latest), we will deprecate @import as well as global core library function calls that could be made through modules.

One year after this deprecation goes into effect (1 October 2022 at latest), we will drop support for @import and most global functions entirely. This will involve a major version release for all implementations.

【訳】
Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）には、@importと、モジュールを介して実行できるグローバルコアライブラリ関数呼び出しは廃止されます。

この非推奨（廃止措置）が発効してから1年後（遅くとも2022年10月1日）には、@importとほとんどのグローバル関数のサポートを完全に廃止します。これには、すべての実装のメジャーバージョンリリースが含まれます。

Sass The Module System is Launched Future Plans

Sassのモジュールシステムとしては、@importの替わりに@useを使用することになります。

参考

本記事の執筆には、以下の書籍を参考にさせていただきました。
「Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、Sassを学習するのであれば、是非手元に置いておきたい1冊です。

リンク