まだ遅くない！Sassの@importを@useと@forwardに置き換えましょう

Sassの@importは遅くとも2021年10月1日から非推奨、その一年後の2022年10月1日には廃止される予定でした。9月末に滑り込みで@importを@useと@forwardに置き換えたのですが、よくよく調べてみるとサポート期間が延長されていました。

July 2022: In light of the fact that LibSass was deprecated before ever adding support for the new module system, the timeline for deprecating and removing @import has been pushed back. We now intend to wait until 80% of users are using Dart Sass (measured by npm downloads) before deprecating @import, and wait at least a year after that and likely more before removing it entirely.
2022年7月: LibSassが新しいモジュールシステムのサポートを追加する前に非推奨になったという事実を考慮し、@importの非推奨と削除のスケジュールを延期しました。私たちは現在、80%のユーザーがDart Sassを使うようになるまで（npmダウンロード数で測定）@importを非推奨とし、その後少なくとも1年、おそらくもっと待って完全に削除する予定です。
https://github.com/sass/sass/blob/main/accepted/module-system.md#timeline

@import廃止まではまだ結構な猶予がありそうです。とはいえ、いずれは廃止されるので、今のうちに置き換えておいた方が良いのは確かですね。

そんなわけで、あくまで私の環境がベースになりますが、@importを@useと@forwardに置き換える方法をご紹介いたします。

ディレクトリ構造

Sassのディレクトリ構造は下記のように変更しました。

scss/
　├ base/
　│　└ _base.scss
　│　└ _mixin.scss
　│　└ _variables.scss
　│
　├ component/
　│　└ _form.scss
　│
　├ layout/
　│　└ _header.scss
　│　└ _footer.scss
　│
　└ style.scss

元のディレクトリ構造は上記のようにしていて、style.scssで以下のように各ファイルを@importしていました。

@import "base/variables";
@import "base/mixin";
@import "base/base";
@import "layout/header";
@import "layout/footer";
@import "component/form";

これを以下のように変更しました。

scss/
　├ common/
　│　└ _index.scss
　│
　├ component/
　│　└ _index.scss
　│　└ _form.scss
　│
　├ global/
　│　└ _index.scss
　│　└ _mixin.scss
　│　└ _variables.scss
　│
　├ layout/
　│　└ _index.scss
　│　└ _header.scss
　│　└ _footer.scss
　│
　└ style.scss

元はbaseフォルダの中に以下3つをまとめて入れていましたが、global(Mixin/変数)とcommon(リセットCSS)に分けました。

_base.scss：リセットCSSと共通スタイル
_mixin.scss：MixinとFunction定義用
_variables.scss：変数定義用

それから、各フォルダの中に_index.scssを追加しています。これについては後述します。

@forwardでフォルダ内のファイルを読み込む

各フォルダに追加した_index.scssで他のファイルを@forwardで読み込みます。こうすることで、_index.scssを@useで読み込んだ時に、@forwardで読み込まれたファイルを引き継ぐことができます。

例えば、global/_index.scssで@forwardを使って_mixin.scssと_variables.scssを読み込むと、layout/_header.scssで@useを使ってglobal/_index.scssを読み込むことで、_mixin.scssで定義したMixinや_variables.scssで定義した変数が使えるようになります。

@forward "form";

@forward "variables";
@forward "mixin";

@forward "header";
@forward "footer";

common/_index.scssの中身はリセットCSSなので、特に何もする必要はありません。

変数やMixinを引き継ぐために@forwardで読み込むならglobalフォルダだけで良いのでは？となるかもしれませんが、style.scssで各ファイルを読み込む時にスッキリさせられるのと、統一感を考えて他のフォルダも_index.scssでまとめています。

style.scssで各フォルダの_index.scssファイルを読み込む

@importの時はstyle.scssでファイルをまとめて読み込んでいました。同じように@useで各フォルダ内の_index.scssを読み込みます(“_index.scss”は省略可)。

@use "common";
@use "layout";
@use "component";

globalフォルダは変数やMixin用なので、ここでは読み込む必要はありません。

各ファイルの先頭でglobal/_index.scssを読み込む

変数やMixinを使いたいファイルの先頭でglobal/_index.scssを読み込みます。

@use "../global"

変数やMixinを利用する箇所では、「名前空間.$変数名」「名前空間.Mixin名」とします。名前空間はファイル名になり、_index.scssを省略した場合はフォルダ名になるので、上記の場合は”global”が名前空間です。

p {
  color: global.$variableName;
  @include global.mixinName;
}

名前空間は任意のものに変更可能です。例えば以下のようにすると、”g”が名前空間になります。

@use "../global" as g;

p {
  color: g.$variableName;
  @include g.mixinName;
}

“*”を指定することで名前空間を省略することもできます。

@use "../global" as *;

p {
  color: $variableName;
  @include mixinName;
}

@importの時と同じ感覚で変数やMixinを使えて良いですが、後から他の人が編集する場合はコンフリクトを引き起こす可能性が出てくるので注意が必要ということです。

You can even load a module without a namespace by writing @use “” as *. We recommend you only do this for stylesheets written by you, though; otherwise, they may introduce new members that cause name conflicts!
use “” を * と書くことで、名前空間なしでモジュールをロードすることもできます。しかし、これはあなたが書いたスタイルシートのみに行うことをお勧めします。そうしないと、新しいメンバーを導入して名前の衝突を引き起こすかもしれません。
Sass: @use

ここまでできたら置き換え完了です。上記のようなシンプルな構成の場合は、そんなに時間はかからないと思います。

@importを入れ子にしていた場合

ちょっと特殊なケースだとは思いますが、以下のように@importを入れ子にしていた場合、そのまま@useに置き換えてもエラーになってしまいます。(@useはファイルの先頭に記述する必要があるため)

.sample {
  @import "component/sample";
}

その場合は「sass:meta」を利用します。sass:metaを読み込むことで、用意されているMixinやFunctionを利用できます。

以下のように”meta.load-css”を使えば、ファイルの先頭以外でも他のファイルを読み込むことができるので、入れ子にしていたファイルの読み込みを実現できます。

@use "sass:meta";

.sample {
  @include meta.load-css('component/sample');
}

SassのコンパイルはVSCodeのLive Sass Compilerが便利

テキストエディタはVSCodeを利用しているので、Live Sass Compilerを使ってコンパイルしています。Dart Sassにも対応しているので、スムーズに移行できました。

Live Sass Compilerは開発者が”Ritwick Dey”と”Glenn Marks”の2種類あり、Ritwick Dey氏の方は開発が止まっていてDart Sassに対応していません。

Glenn Marks氏のLive Sass Compilerは開発が引き継がれていてDart Sassにも対応していますので、Glenn Marks氏の方をインストールしましょう。

あとがき

今後改良を重ねていくかもしれませんが、とりあえず今のところは上述したような構成で落ち着きました。

まだ@importを使っていて@useや@forwardに置き換えていないという方は、ぜひ参考にしていただけると幸いです。

サポート期間が延長されて余裕が出来たとはいえ、ゆくゆくは置き換えないといけなくなるので、今のうちにやっちゃいましょう。(9月末にやっと重い腰を上げた私が言えたことではないですが^^;)