Sassの書き方（ファイル分割）

Sassファイルを分割する

Sassは@useを使うと別のSassファイルやCSSファイルを読み込むことができます。
この機能を使うと、リセットCSSや共通設定（フォントサイズや色など）、ページ単位、パーツ単位で書いた複数のSassファイルに分割して書くことができるようになります。

ファイルの拡張子は.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というファイルを用意します。

以下の例では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など拡張子が混在していても大丈夫です。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。