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

投稿日：2025/06/20 ｜最終更新：2025/06/19
CSS・Sass
scss, パーシャル

１つのCSSファイルを生成するのに、分割されたscssファイルを再統合できます。
つまり、scssファイルに他のscssファイルの記載内容や変数をincludeして利用できます。

分割されたscssファイルは、ファイル名の先頭にアンダースコア（_）を付与し、それ単体ではコンパイルされません。
ファイル名の先頭にアンダースコア（_）がついているscssファイルをパーシャルと呼びます。
パーシャルについての基本的な考え方は別の記事で紹介しています。

今回は、パーシャルを呼び出して利用（include）する方法として、@forwardディレクティブを使った方法を紹介します。

@useの基本的な使い方

パーシャルを読みこんで利用するには、基本的には@useを利用します。
@useは Dart sass が提供しているディレクティブで、他のファイル（パーシャル）の記載内容や変数などの定義を名前空間として認識し、@use されたこれらの定義を @use しているファイル内でのみ利用することができます。

@useを使ったパーシャルの呼び出し方法については下記の記事で紹介しています。

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

@useだけでは二階層以上前のパーシャルの変数は利用できない

@useしたパーシャルの変数は、@useしたscssファイル内でのみ利用できます。
@useしたパーシャルを@useしたscssファイルで、二段階以上前のパーシャル内の変数を利用しようとすると、コンパイルエラーになります。

二階層以上パーシャルを利用したディレクトリ構造例

┣[css]
┃  ┗style.css    //style.scssから生成。
┃
┣[scss]
┃  ┣━ [ common ]━┳━_index.scss //ディレクトリ名を指定するとこのパーシャルが読まれる
┃  ┃             ┣━_color.scss //色関係をまとめたパーシャル
┃  ┃             ┗━_reset.scss //ブラウザの初期設定をリセットするパーシャル
┃  ┣━ _layout.scss  //サイトレイアウト用パーシャル
┃  ┗━ style.scss    //style.cssを生成する。[base]及び[components]を利用している。
┃
┗index.html

一階層目ではエラーにならない

▼[common/_color.scss]記載例

$background: #f7f7f7;
$text-color: #323232;

▼[common/_index.scss]記載例

@use 'color'; //_color.scssを読み込む
@use 'reset'; //_reset.scssを読み込む

body{
    background: color.$background; //_color.scss内の変数を利用
    color: color.$text-color;      //_color.scss内の変数を利用
}

_index.scssで_color.scssと_reset.scssの二つのパーシャルを@useしています。
@useしたパーシャルの変数は、@useしているパーシャル内でのみ利用できるので、エラーにはなりません。

二階層目以降でエラーになる

▼style.scssで下記のように記載します。

@use 'common'       // common/_index.scss を呼び出して利用。「_index.scss」は省略可能。
@use 'layout';      // _layout.scss を呼び出して利用。

body {
//下記はコンパイルエラーになります。
    color: common.$text-color;     //common/_index.scss内で設定された変数を利用。_index.scss内では変数は定義されていないのでコンパイルエラー。
    background: color.$background; //common/_index.scssで@useしている_color.scss内で設定された変数を利用。@useでは一階層前からしか変数を利用できないのでcolorという名前空間は利用できずコンパイルエラー。
}

[style.scss]では、[common/_color.scss]と[common/_reset.scss]を@useしている[common/_index.scss]を@useしていますが、[common/_index.scss]で@useしたパーシャルの変数を利用できません。

[common/_index.scss]の名前空間を利用しようとしても、[common/_index.scss]内では$text-colorという変数は定義されていないので、コンパイルエラーとなります。
[style.scss]で@useしている[common/_index.scss]で@useしている[_color.scss]内で設定された変数を利用しようとしても、@useでは一階層前からしか変数を利用できないので、二階層以上前にあるcolorという名前空間は利用できず、コンパイルエラーとなります。

@forward

２階層先で変数を利用できるようにするには、一階層目でパーシャルを@forwardし、二階層目で一階層目のパーシャルを@useします。

一階層目で@forwardする

▼[common/_color.scss]記載例

$background: #f7f7f7;
$text-color: #323232;

▼[common/_index.scss]記載例

@forward 'color'; //_color.scssを転送する
@forward 'reset'; //_reset.scssを転送する

body{
//下記はコンパイルエラーとなる
    background: color.$background; //@forwardしているパーシャルの変数は利用できない
    color: color.$text-color;      //@forwardしているパーシャルの変数は利用できない
}

_index.scssで_color.scssと_reset.scssの二つのパーシャルを@forwadしています。
@forwardしたパーシャルの変数は、@forwardしているパーシャル内では利用できないので、コンパイルエラーになります。

二階層目以降で@useする

▼style.scssで下記のように記載します。

@use 'common'       // [common/_index.scss]を呼び出して利用。「_index.scss」は省略可能。
@use 'layout';      // _layout.scss を呼び出して利用。

body {
    color: common.$text-color;     //[common/_index.scss]の名前空間にそれ以前に@forwardされたパーシャルの変数が対応しているので利用可能になる。
}

＠useしたパーシャルの中で@forwardされているパーシャルに記載されていた変数を利用できます。
ここでは[common/_index.scss]内で@forwardされていた[common/_color.scss]と[common/_reset.scss]内の変数を、[common]という名前空間で利用できるようになります。

@forward 'パーシャル名' with ( 変更内容 );

@forwardしたパーシャルで呼び出した内容を更新するには、withを利用します。
withの中に変更内容を記載すると、@forwardした定義内容を書き換えて利用できます。
元のパーシャルの内容を変更せず、呼び出しファイル側で限定的に書き換えることができるので、大きなプロジェクトなどでは便利です。

パーシャルの記載例

例えば下記のようなパーシャルがあったとします。
▼_colors.scss

$text-color: #000 !default;

!defaultを付記すると、その設定内容がデフォルト値となり、呼び出し側でwithでの書き換えが可能になります。
!defaultを書かなかった場合はコンパイルエラーとなります。

style.scss の記載例

// @use 'パーシャル名' で呼び出した名前空間内の定義をwithに記載した内容で上書きする
@forward 'colors' with(
    $text-color: #323232; // setting/_colors.scssで定義した内容を変更する
);

body {
    color: color.$text-color;
}