2-4. @importでファイルを分割して管理する

1.なぜCSSファイルを分割するのか？

中〜大規模なサイトにおいて、CSSの分割は必須になってきています。機能やページごとにCSSファイルを分けることで、メンテナンス性を高めるためです。（どこに何のためのCSSを書いたのかあとからわかりやすくなる）

しかしページ読み込み時にCSSが分割されていると、何個ものファイルを読み込む必要があるため、読み込み速度が遅くなります。そこでSassのファイル分割を使うと、分割したファイルが1つにまとまるため、ファイルの読み込み数が減り、ページの読み込み速度が速くなります。

2.@importで分割したファイルを読み込む

まずは分割したファイルをとりまとめるファイル、application.scss（ファイル名は何でも大丈夫です）を作成します。

application.scssに以下の内容を記述します。

@import "common";
@import "header";
@import "footer";

次に分割ファイルを作成します。それぞれ名前は以下のように付けます。

• _common.scss
• _header.scss
• _footer.sss

ファイル名の最初に「_（アンダーバー）」を付けます。

分割した各ファイルに記述をします。

_common.scss

div{
  content: "common";
}

_header.scss

div{
  content: "header";
}

_footer.scss

div{
  content: "footer";
}

コンパイルするとapplication.cssが出力されます。他のファイルは出力されません。

div {
  content: "common";
}

div {
  content: "header";
}

div {
  content: "footer";
}

@importで読み込んだ順番でコンパイル結果が出力されます。

3.@importはどこにでも追加できる

@importはどの場所にも追加できるため、例えば途中に普通のSassの記述があって、最後にまた分割ファイルを読み込むこともできます。

@import "common";
@import "header";
@import "footer";

div{
  content: "body";
}

@import "sp";
@import "print";

ファイルをうまく分割して、メンテナンス性の高いファイル構成を目指しましょう。