大規模なプロジェクトだとソースコードが膨大になりますよね。
複数人が関わるプロジェクトだと、担当領域ごとにファイルを細分化することもあると思います。
しかし、CSSファイルを分割しすぎると、HTTPリクエストが増えるためページの読み込みが遅くなったり、どこになにが書いてあったのかわからなくなったりします。

Sass（scss）では、分割されたscssファイルを一つのCSSに統合することができます。
今回はscssファイルの分割と統合方法についてまとめてみます。

パーシャルとは

ファイル名の先頭がアンダースコア（_）から始まるscssファイルをパーシャルと言います。
scssファイルを作成すると、コンパイル時に同名のCSSファイルが作成されますが、パーシャルに対応するCSSファイルは生成されません。
ファイル名の先頭にアンダースコアがついていないscssファイルからパーシャルを読み出すことで、パーシャルに記載した内容をCSSファイルに入れこむことができます。

パーシャルを利用すると、scssファイルを適宜分割できるので、内容ごとにscssファイルを分類でき、開発がしやすくなります。
パーシャル内で設定している変数も利用できるので、非常に便利です。

パーシャルを利用したディレクトリ構造例

┣[css]
┃  ┗style.css    //style.scssから生成。
┃
┣[scss]
┃  ┣━[base]━━━━━━━━━┳━ _index.scss      //[base]ディレクトリ内のパーシャルをまとめたパーシャル
┃  ┃                ┣━ _reset.scss      //ブラウザの初期スタイルリセット用パーシャル
┃  ┃                ┗━ _typography.scss //フォント関係をまとめたパーシャル
┃  ┣━[components]━━━┳━ _index.scss      //[components]ディレクトリ内のパーシャルをまとめたパーシャル
┃  ┃                ┣━ _button.scss     //ボタン用パーシャル
┃  ┃                ┗━ _cards.scss      //カード用パーシャル
┃  ┃
┃  ┗ style.scss    //style.cssを生成する。[base]及び[components]を利用している。
┃
┗index.html

@use 'base';           // [base/_index.scss]を読み込む。
@use 'base/reset'      // [base/_reset.scss]を読み込む。
@use 'base/typography' // [base/_typography.scss]を読み込む。

// [components/_index.scss]で同階層のパーシャルを @forward している場合は、
// _index.scss を @use すれば[components]階層の全ての定義を利用できる。
@use 'components';

パーシャルを読み込む方法

パーシャルをcssにコンパイルするには、ファイル名の先頭にアンダースコアの無いscssファイルで、@useまたは@forwardする必要があります。

実際の利用例

例えば下記のようなディレクトリ構造でscssとパーシャルを作成します。

┣━[css]━━━━ style.css      //生成されるcss
┣━[scss]━┳━ style.scss     //style.cssを生成するscss
┃        ┣━ _color.scss    //色を設定する変数のパーシャル
┃        ┗━ _reset.scss    //ブラウザのスタイルを初期化するためのパーシャル

▼_color.scssの内容は下記の通りです。

$primary-color: blue;
$error-color: red;

▼_reset.scssの内容は下記の通りです。

body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

▼style.scss内で下記のようにパーシャルを呼び出します。

@use 'reset'; // _reset.scssを呼び出す
@use 'color'; // _color.scssを呼び出す

body{
    color: black;
}
.button{
    color: $primary-color; //_color.scssで設定した変数を利用
}
.error{
    color: $error-color; //_color.scssで設定した変数を利用
}

▼生成されたCSSは下記の通りです。

body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

body {
  color: black;
}
.button{
    color: blue;
}
.error{
    color: red;
}

コンパイル時に、_color.scss と _reset.scss に記載されている内容が、style.scssに記載した内容とともに style.cssに出力されます。
_color.scss で設定された変数を、style.scss内で利用することもできます。

@useや@forwardというSCSSの制御ディレティブを利用し、パーシャルをCSSファイルにコンパイルします。

@import（サポート終了）は利用しない

@importはパーシャルを読み込む時に利用されていた古いディレクティブで、2022年10月にサポート終了となりました。
@importは分割されたSassファイルを読み込む機能ですが、読み込みした定義を利用時にどのスタイルシートで定義した内容なのかを指定しないため、どのスタイルシートで定義された変数かわからず、デバッグがしにくいというデメリットがあります。

@import を利用していた読み込み箇所については、@useや@forwardに変更する必要があります。

@import 'colors';
@import 'button';

.card {
    background: $primary-color; //importされたファイルの内どれで定義された変数かわからない
}

@useと@forward

パーシャルを読み込む時は、@useまたは@forwardを使用します。
@useまたは@forwardは、公式に推奨されているDart Sass（scss）に用意されているディレクティブです。

下記の記事で詳細に解説しています。

Sassの@useで他のscssファイルの定義を利用する～scssファイルを分割して管理するパーシャルの考え方と使い方②

Sassの@forwardで他のscssファイルの定義を転送する～scssファイルを分割して管理するパーシャルの考え方と使い方③

まとめ

個人的にSassの良さはファイル分割しても一つのCSSにコンパイルできることだと思います。
ファイル分割すると開発がしやすくなるので、パーシャルを使いこなして積極的に分割・統合していただきたいと思います。

パーシャルの利用に不可欠な@useまたは@forwardは次回の記事で詳しく解説したいと思います。