【Sass】分割した複数のスタイルシートをまとめる(@import)方法

今回はSassを使用する一番の利点とも言えるファイルの分割記述について紹介します。

Sassではファイルを分割して、後で一つのスタイルシートにまとめる技法があります。それを「Partials」と言います。機能別やレイアウト別にSaccファイルを作成することで従来より非常に見通しのよいコードを記述する事ができ便利な機能になっていますので是非習得して下さい。

基本的なSass技法については以下の記事をみて下さい。

分割した複数のスタイルシートをまとめる方法

まずはSassの分割技法を用いる時のファイルの作成方法について紹介します。

例えば、sassファイルの中に幾つかのファイルを分割して作成したい場合は、以下のようにファイルを作成しておきます。（パスの指定が正しければどんなファイル構造でもOKです。）

└── sass
    ├── parts
    │   ├── _all.scss
    │   └── _body.scss
    │   └── _footer.scss
    │   └── _body.scss
    │   └── _grid.scss
    │   └── _header.scss
    │   └── _responsive.scss
    │   └── _sidebar.scss
    └── style.scss

「parts」ファイルの中に入っている「_all.scss」〜「_sidebar.scss」を分割して各々のスタイルを記述していきます。そして「style.scss」の一つにまとめる事を想定しています。

ファイル名の初めに「 _ 」を付けているのは、分割ファイルがコンパイルされる事を防ぐためです。

コンパイルとは？人間の書いたコードを機械が認識できる形に変換する事です。Sassで言うところのcssへの変換作業です。

コンパイルの方法については、以下の記事の方法がおすすめです。

そして分割されたファイルを「style.scss」にまとめる方法「@import」を使用して以下のように書いていきます。この時に「 _ 」は省略することが出来ます。

// インポート　（style.scssに記述）
@import "parts/grid";
@import "parts/all";
@import "parts/header";
@import "parts/body";
@import "parts/footer";
@import "parts/sidebar";
@import "parts/responsive";

上記の記述をした「style.scss」をコンパイルすると「@import」で読み込んだファイルのSassファイルも一緒にコンパイルしてくれて、結果以下のように一つにまとまったスタイルシートが完成します。