別の SCSS ファイルを読み込む @import

機能別等にファイルを分けて作成した SCSS を結合する @import。

@import

例えば、複数人でスタイルシートの部品を作る場合、1つのファイル（style.css）で作業するより複数の機能別ファイル(button.scss や breadcrumbs.scss) で作業する方が効率が良いことがあります。

また、 1 ファイルに全てのスタイルを書いていくと記述量が多くなり、可読性が悪くなります。そこで、一定のルールでファイルを分割し開発を行うと変更や修正がしやすくなるという効果が得られます。

SCSS を複数のファイルに分割することをパーシャル( partial )と言い、分割した SCSS ファイルのファイル名の先頭に _ （アンダースコア）を付けます。

そして、小分けにしたファイルをまとめてくれるのが @import になります。

例えば、 _button.scss と _breadcrumbs.scss を作成したとします。この 2 つのファイルを取り纏めるため style.scss というファイルを用意し、次のように記述します。

@import 'button';
@import 'breadcrumbs';

Sass プロセッサは、ファイル名の先頭に _ （アンダースコア）がついたそのファイル自体を CSS にコンパイルしないため、取り纏めのファイル（ style.scss ）をコンパイルし 1 つの CSS を出力することができます。

※ @import に指定する名前は、 _ （アンダースコア）を取ったファイル名になります。

ディレクトリを分けて管理したい場合

SCSS ファイルを役割によって分けて管理したい場合、役割別にディレクトリを作成することが考えられます。例えば、次のように component ディレクトリと utility ディレクトリを用意し、それぞれのディレクトリに SCSS ファイルを作成したとします。

src
    |- style.scss
    |- component
          |- _button.scss
    |- utility
          |- _hidden.scss

用意したディレクトリ配下の SCSS ファイルもまとめてコンパイルするには、 @import に相対パスで対象のファイルを指定します。

@import 'component/button';
@import 'utility/hidden';

インポートのネスト

インポートは、次のようにネストすることもできます。

footer {
  @import "copyright"
}

インポートされるファイル（_copyright.scss）

.copyright {
  background-color: #ECEFF1;
  text-align: right;
}

コンパイルを行うと次のように出力されます。

footer .copyright {
  background-color: #ECEFF1;
  text-align: right;}