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

投稿日：2025/06/19
CSS・Sass
scss, パーシャル, @use

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

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

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

@useを利用してパーシャルを呼び出す

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

定義利用時にはわざわざ名前空間を指定しなくてもOKですが、同じ変数が複数のパーシャルで利用されている場合には、名前空間を指定することで明示的に指定したパーシャル内の変数を利用できます。

@useを利用するときは、パーシャルのファイル名の文頭のアンダースコア（_）と拡張子は必要ありません。

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

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

パーシャルの記述例

▼[common/_index.scss]記載例

$text-color: #777;
$base-color: #0095cf;

▼[common/_color.scss]記載例

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

上記の例では、２つのパーシャル内で$text-colorという同じ変数が定義されていますが、呼び出し側のscssでどちらを利用するか指定することで対応します。

パーシャルの呼び出し例

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

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

body {
    color: common.$text-color;     //common/_index.scss内で設定された変数を利用。ディレクトリ名の指定で「_index.scss」内の変数を利用可能。
    background: color.$background; //common/_color.scss内で設定された変数を利用。ファイル名を指定すればディレクトリ名は省略可能。
}

２つのパーシャル内で$text-colorという同じ変数が定義されていますが、名前空間を指定することでどちらを利用するか明示しています。

通常、@useにパーシャルを指定する時は、ディレクトリパス＋ファイル名を記載します。
_index.scss を読み込む際は、ディレクトリ名だけでOKです。
読み込み後に_index.scssの名前空間を利用する際は、ディレクトリ名を指定すればOKです。

@use 'パーシャル名' as 'エイリアス名';

@useする際には、デフォルトではファイル名が名前空間として定義されます。
asの後にエイリアス名（別名）を指定することで、呼び出し時の名前空間名を変更することができます。
パーシャルのファイル名が長くなった場合などは、エイリアス名を指定することでコードを簡潔にできます。

style.scss の記載例

@use 'setting/colors' as color; // @use 'パーシャル名' as 'エイリアス名' で名前空間名を変更できる

body {
    background: color.$bg-basic; // 'setting/colors'の中に設定された変数を利用する
    color: color.$text-basic;    // 'setting/colors'の中に設定された変数を利用する
}

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

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

パーシャルの記載例

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

$text-color: #000 !default;

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

style.scss の記載例

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

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

@useしたパーシャルを@useする時の注意事項

@useしたパーシャルを更に@useしてもOKです。
多段的に@useしても、元のパーシャルの設定内容をコンパイルすることは可能です。

ただし、@useしたパーシャルを更に@useした時、一番最初に@useしたパーシャル内の関数・変数を利用することはできません。
例えば、孫パーシャルを読み込んでいる子パーシャルを読み込んでいる親scssファイルがあった時、親scssで孫パーシャルの変数を利用することはできません。

例えば下記のような利用方法はNGです。

_mago.scss｜孫パーシャルの記載例

$text-color: #323232;

_ko.scss｜子パーシャルの記載例

@use 'mago'; // _mago.scssを@useする
div{
    color: mago.$text-color; // 孫パーシャルの定義を利用できる
}

oya.scss｜親scssファイルの記載例

@use 'ko'; // _mago.scssを@useした_ko.scssを@useする
body{
    color: ko.$text-color;      // コンパイルエラーになる
    color: mago.$text-color;    // コンパイルエラーになる
    color: ko.mago.$text-color; // コンパイルエラーになる
}

孫パーシャルの定義を親scssファイルで利用するには、子パーシャルで@useではなく@forwardする必要があります。