COLUMN コラム

私はSCSSでコーディングをする時はFLOCSSをベースに、リセットはreset.scss、変数やmixinはvariable.scss、基本設定はbase.scssにするなど、ファイルを分割して記述しています。分割して記述したファイルは最後にまとめる必要がありますが、それらのファイルを統合する際に使用するのが
「@import」です。
 
「@import」で分割したファイルを読み込むと、各ファイルで定義された変数やmixinはどのSCSSファイルからでも参照することができるので、一見するとお手軽で便利と思っていたのですが、この「@import」が2022年10月に廃止となるようです。
 
「@import」廃止後は「@use」や「@forward」を使用することになるので、あとで慌てることがないように事前に触ってみた所、いくつか詰まるポイントがあったので、備忘録も兼ねて紹介したいと思います。

1. はじめに

1-1. @importについて

「@import」は外部のSCSSファイルを読み込むことができます。下記のFLOCSSをベースにした構成の場合、最後に一つのファイルに統合するため、style.scssに@importですべてのSCSSファイルを記述することになります。

■ foundation
├ _base.scss
├ _reset.scss
└ _variable.scss
■ layout
├ _l-container.scss
├ _l-header.scss
└ _l-footer.scss
■ object
├ component
│　└ _c-button.scss
├ project
│　└ _p-profile.scss
└ utility

@import "Foundation/reset";
@import "Foundation/variable";
@import "Foundation/base";
@import "Layout/l-header";
@import "Layout/l-footer";
…

「@import」で読み込むとvariable.scssに書いた変数を、どのファイルからでも参照できるようになるので（グローバル変数になる）、お手軽だなと思っていたのですがこれが廃止の一因でもあるそうです。
 
参考サイト：「The Module System is Launched」

1つのスタイルシートで定義されたものはすべて、その後にインポートされたすべてのスタイルシートで使用できるため、特定の変数、ミックスイン、または関数（総称して「メンバー」と呼ばれる）が最初に定義された場所を特定することはほぼ不可能でした。

1-2. @useについて

＠importに代わって使用することになるのが「@use」です。外部のSCSSファイルを読む込むという挙動は同じですが、読み込んだファイルの中身（変数やmixin）は、読み込み元のファイル内でしか参照することができません。@importのようにグローバル変数扱いとはならないので、variable.scssの中身を参照したい場合は、下記のように都度@useで読み込ませる必要があります。

@use "../../foundation/variable";

また、SCSSのコンパイル環境によっては、すぐに使うことができないので要注意です。特にgulpでコンパイルをしている場合は「node-sass（LibSass）」から「Dart Sass」への移行が必要になるので確認しておきましょう。GUIコンパイラの「Prepros」を使用している場合は、最初から「Dart Sass」でのコンパイルとなっているので、すぐに「@use」を使うことができます。

1-3. @forwardについて

@forwardは、@useで他ファイルから参照される際に一緒に読み込んで欲しいSCSSファイルを指定することができます。

@forward "../../foundation/reset";
@forward "../../foundation/variable";
@forward "../../foundation/base";

＠useだけだと単に記述する量が増えただけで面倒そうに見えますが、@forwardを併用することで、これまで通り複数ファイルをまとめて読み込むことが可能になります。

2. 気を付けるポイント

2-1. @forwardの役割は転送

@forwardで読み込んだファイルの中身（変数やmixin）は、読み込み元のファイル内で使用することはできません。@forwardの指定はあくまで、SCSSファイルが@useで読み込まれる時に一緒に読み込む（転送してくれる）ファイルを指定したものです。
 
説明を読んで理解したつもりでも、実際に使用するとコンパイルエラーになることが多いので、@useの役割は「読み込み」、@forwardの役割は「転送」ということを意識しておきましょう。

2-2. 変数の記述

@importで読み込んだ変数を使用する時は以下のように記述していましたが、@useで読み込んだ変数を同じように記述するとエラーになってしまいます。

$color_theme_red: #ff0000;

@import "../../foundation/variable";

.c-button {
	color: $color_theme_red;
}

@importの廃止は、どこから参照しているのかをしっかり記述しましょう、という仕様変更なので、変数を扱う際にもしっかり記載元のファイルを記述する必要があります。

@use "../../foundation/variable";

.c-button {
	color: variable.$color_theme_red;
}

メディアクエリの記述をmixinで設定している場合もファイル名の記述が必要です。記述箇所を迷いやすいので、反映されない場合はしっかり確認してみましょう。

@use "../../foundation/variable";

@include variable.media(md) {
	……
} 

おわりに

今回は@importから@useへの移行で気を付けるポイントについて紹介しました。FLOCSSでコーディングをしている場合、結構大掛かりな記述の変更になるので、日頃の業務で使用されている方は早めに触れておくことをオススメします。また、Web界隈ではこのような仕様変更が度々起きるので、日頃からアンテナを張っておき、戸惑わないように対処していきましょう。