Sassを使った効率的CSSコーディング術

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

  • HTML・CSS

Sassには、分割されたファイルを1つにまとめてコンパイルして出力する機能があります。これを使えばページを読み込む際にいくつものCSSを読み込むことなく、1つのファイルで読み込むことによって、読み込み速度の改善が見込めます。

公開日:2019/06/11最終更新日:2019/06/11

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";

 

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

理解度チェック







このレッスンの著者