最終更新日：
公開日：
レシピ
Sass
Sassの書き方（ファイル分割）
複数に分かれたSassファイルを読み込んで1つのCSSとして出力する@useの使い方を解説します。
この記事のポイント
- @useを使うと別のSassファイルやCSSファイルを読み込むことができる
- ファイル名の先頭にある「_」や拡張子は省略可能
- 複数ファイルを自動的に一括読み込むするときは_index.scssを作成する
目次
Sassファイルを分割する
Sassは@useを使うと別のSassファイルやCSSファイルを読み込むことができます。
この機能を使うと、リセットCSSや共通設定（フォントサイズや色など）、ページ単位、パーツ単位で書いた複数のSassファイルに分割して書くことができるようになります。
Note
SassではSassファイルの読み込みに@importを使っていましたが、現在は非推奨になり今後数年後に廃止になる予定です（明確な時期は不明になっています）。
本ページでは@useを使いますが、gulp-sass 4.xを使っている場合は@useは使えないため、コード中の@useは@importに置き換えてください。
ファイルの拡張子は.scss、.sass、.cssのいずれも読み込むことができます。
また、拡張子を統一する必要はなく、.scssファイルから.sassファイルを読み込むことも可能です。
以下の例ではstyle.scssからCSSファイルのother.css、Sassファイルの_header.sassと_footer.scssを読み込みます。
いずれの書き方も有効です。
style.scss
// other.cssを読み込む
@use url("other.css");
@use url(other.css);
@use "other.css";
@use 'other.css';
// _header.sassを読み込む
@use '_header.sass';
@use 'header.sass';
@use 'header';
// _footer.scssを読み込む
@use '_footer.scss';
@use 'footer.scss';
@use 'footer';Sassファイルの分け方は以下のように役割に応じて分けて、Sassをコンパイルする段階でstyle.scssが他のファイルを読み込んで1つのstyle.cssに出力することができます。
- style.scss – 他のSassを読み込む
- _reset.scss – リセットCSS
- _common.scss – 共通スタイル
- _mixin.scss – ミックスイン定義用
- top.scss – トップページのSass
- about.scss – AboutページのSass
- contact.scss – ContactページのSass
CSSで外部ファイルを読み込む@importはリクエストのタイミングで外部のCSSを読み込むため、ファイルの数だけリクエストが発生するなどデメリットがありました。
また、@importはCSSファイルの冒頭で書く必要がありました。
Sassの@useはコンパイルの段階で読み込むため、コーディングの段階ではファイルを分割してメンテナンスしやすくしつつも、最終的なCSSをまとめることができるためリクエストは抑えることができます。
@useを書く場所も先頭である必要はなく、ファイルが必要になるタイミングで読み込むなど自由度が高いところも特徴です。
以下の例ではstyle.scssが他のファイルを読み込んで1つのstyle.cssとして出力します。
読み込んだ.scssファイルは読み込んだ順にコンパイルしてCSSに出力します。
style.scss
body {
font-size: 16px;
background-color: #eee;
}
// 共通scssファイル
@use '_reset.scss';
@use '_common.scss';
@use '_mixin.scss';
// 各ページのscssファイル
@use 'top.scss';
@use 'about.scss';
@use 'contact.scss';
... 省略 ...ファイル名を省略して読み込む
@useではファイル名の先頭にある「_（アンダースコア）」を省略しても読み込むことができます。
また、拡張子「.scss」も省略できます。
以下の例ではいずれも同じSassファイルを読み込むことができます。
style.scss
// _header.sassを読み込む
@use '_header.sass';
@use 'header.sass';
@use 'header';ファイル名を省略すると、先述した分割したSassファイルを以下のように書いて読み込むことも可能です。
style.scss
body {
font-size: 16px;
background-color: #eee;
}
// 共通scssファイル
@use 'reset';
@use 'common';
@use 'mixin';
// 各ページのscssファイル
@use 'top';
@use 'about';
@use 'contact';
... 省略 ...読み込むファイルを一括指定
@useでは@importのようにファイル名を「,（コンマ）」で区切った一括指定はできません。
@useで複数のファイルを一括読み込みしたいときは、読み込むファイルを書いた_index.scssか_index.sassというファイルを用意します。
Note
Sassの公式サイトでは_index.scssか_index.sassのように先頭に「_」を付けるよう記述がありますが、現在はindex.scssのように付けなくてもファイル読み込みは機能します。
しかし特別な理由がない限りは公式の通り「_」を付けることをおすすめします。
以下の例ではsassフォルダのstyle.scssから_index.scssを通して6つのscssファイルを読み込むことができます。
- sass/style.scss – 全てのscssファイルを読み込むscssファイル
- sass/_index.scss – 読み込むファイルが書かれたscssファイル
- sass/_reset.scss – リセットCSS
- sass/_common.scss – 共通スタイル
- sass/_mixin.scss – ミックスイン定義用
- sass/top.scss – トップページのSass
- sass/about.scss – AboutページのSass
- sass/contact.scss – ContactページのSass
style.scss
// ファイルを読み込む
@use "sass";_index.scss
@use 'reset';
@use 'common';
@use 'mixin';
@use 'top';
@use 'about';
@use 'contact';この構成でSassをコンパイルすると、_index.scssに書いたファイルを全て自動的に読み込みます。
読み込むファイルは.scss、.sass、.cssなど拡張子が混在していても大丈夫です。