以前の記事「Gulpで使っているSassをNode SassからDart Sassへ移行してみる」でもまとめていましたが、Sassの公式サイトで今後はDartSassを使うことが推奨とされると発表がありました。   そのDartSassですが、今後@import規則が廃止される予定だそうです。そこで今回は@import規則の廃止に備えて@useや@forwardへの以降方法についてまとめていきたいと思います。  

@importから@useへの移行

まずはこれまで使っていた「@import」規則についておさらいしておきます。この@importを使うことで、指定した外部Sassファイルはそのままインクルードすることができ、読み込み元のファイル内で記述されているスタイルはもちろん、変数やmixinなどもそのまま使えることができます。 【main.scss】※一部抜粋

// 従来の記述（@import）
@import "foundation/variable";
@import "foundation/mixin";
@import "foundation/color";
@import "foundation/reset";
............

  @importの廃止に伴い、これらの規則は「@use」に置き換える必要があります。記述方法としては下記の通り単純にimportの表記がuseに置き換わっただけという感じですね。 【main.scss】※一部抜粋

// 移行後の記述（@use）
@use "foundation/variable";
@use "foundation/mixin";
@use "foundation/color";
@use "foundation/reset";
............

  ただし、このまま置き換えただけですと、コンパイル時に変数やmixin、またfunctionが参照されないというエラーが発生してしまいます。@importの時にはそのまま読み込み元の変数などが使えていたのですが、@useでは使えなくなってしまっているのでしょうか、、

Error: src/sass/layout/_header.scss
Error: Undefined variable.
>>> font-size: $font-XL;

  エラーの原因ですが、@useで読み込んだ場合には、ファイルに対応した「名前空間（ネームスペース）」が発生し、読込先で読み込み元の変数を指定する際にプレフィックスのような形で追記することが必要になります。ですので、下記のように別ファイルで変数などを指定した場合に、@useで読み込んだ先のファイル名のネームスペースをドットで繋いで記述します。

// sass/foundation/_variable.scss
$font-XL: 64px;

// sass/layout/_header.scss
@use "../foundation/variable";
h1 {
  font-size: variable.$font-XL;
}

  もちろんmixinやfunctionでも同じように指定する必要があります。基本的にネームスペースをつける以外はそのまま使えます。 【sass/layout/_header.scss】

@use "../foundation/mixin";
h1 {
  @include mixin.font-style(heading);
}

  ちなみにこのネームスペースはデフォルトでは読み込み元のファイル名が充てられますが、下記のように「as 変更後のネームスペース」で指定すると任意のものに変更することが可能です。表記が長くなる場合にはこのように置き換えておくと便利ですね。 【sass/layout/_header.scss】

@use "../foundation/variable" as f;
h1 {
  font-size: f.$font-XL;
}

   

@forwardの活用方法について

この@useに置き換えた形でも基本的に外部ファイルの変数やmixinを使えるのですが、変数やmixin用のファイルがたくさんある場合には、その分だけファイルの読み込みとネームスペースの指定が増えてしまうことになります。たとえば下記のようなファイル構成の場合には、スタイルの指定用のSassファイルごとに全ての変数・mixin用のファイルを読み込む必要も出てきます。実際に読み込む時には必要となるSassファイル分だけ、@use規則での指定が並び、さらにネームスペースもバラバラになってしまい、コードを書く手間が増えてしまいます。 【sass/layout/_header.scss】

// @use規則とネームスペースの種類が増えてしまう
@use "../foundation/variable";
@use "../foundation/mixin";
@use "../foundation/color";
@use .......
h1 {
  font-size: variable.$font-XL;
  @include mixin.text-style(heading);
  color: color.$color-primary;
}

  そこで、変数やmixinなど共通の変数や処理などのSassファイルをまとめて読み込むインポート専用のSassファイルを追加で作成し、その中で@useを使って読み込んで、スタイル指定用のSassファイル側で使えるようにします。

sass
  ┣ foundation
    ┣ _import.scss  // 変数やmixin用のSassファイルをまとめて読み込む用として追加
    ┣ _variable.scss
    ┣ _mixin.scss
    ┣ _color.scss
    ┣ _reset.scss
    ┣ ............
  ┣ layout
    ┣ _header.scss
    ┣ ............

  インポート専用のSassファイルとして追加したものの内容は以下のようになりました。 【sass/foundation/_import.scss】

@use "variable";
@use "mixin";
@use "color";
@use "reset";
@use ...........

  これで、下記のようにインポート用のスタイルだけを読み込むだけでOKですのでかなりスッキリしますね。ネームスペースも1つだけになりました。 【sass/layout/_header.scss】

@use "../foundation/import" as f;
h1 {
  font-size: f.$font-XL;
  @include f.text-style(heading);
  color: f.$color-primary;
}

  ただし、この方法だと下記のように変数が参照できないというエラーが発生してしまいました。@useで該当のSassファイルを参照しているはずなのに何故でしょうか。

Error: src/sass/layout/_header.scss
Error: Undefined variable.
>>> font-size: f.$font-XL;

  実は、@useで読み込んだ場合には、読み込み元で定義されている変数やmixin、functionしか使えないという制約があるとのことです。なので、複数のSassファイルとまとめて読み込んだインポート用のSassファイルで定義した変数などのみが使えるということです。定義する変数やmixinが少なければ1ファイルに収まるかもしれませんが、フレームワークとして使う場合にはそれだけだと間に合わない場合もあります。   そこで新たに「@forward」というものを使います。これは@useと異なり、読み込んでいる全てのファイルで定義されている変数やmixin、functionが使えるようになるというものです。使用方法もuseの表記をforwardに置き換えるだけで同じように使えます。 【sass/foundation/_import.scss】

// @useではなく@forwardで読み込むようにする
@forward "variable";
@forward "mixin";
@forward "color";
@forward "reset";
@forward ...........

  これで下記のようにインポート用のSassファイルを読み込むだけでOKとなり、エラーもなくコンパイルできるようになりました。 【sass/layout/_header.scss】

// @use規則を1つにして、ネームスペースも統一できる
@use "../foundation/import" as f;
h1 {
  font-size: f.$font-XL;
  @include f.text-style(heading);
  color: f.$color-primary;
}

  微妙に性質が異なる@useと@importですが、直接的に使用する前提で読み込む場合には@useを、間接的に使用する前提で読み込む場合には@forwardという使い分けで良さそうですね。  

---

  今回はDartSassで使える@useを、廃止予定の@importからの移行させる流れについてまとめてみました。まだ私自身どのように扱うのがベストかと悩んでいるのですが、うまく使いこなすことでかなり合理的なSassのファイル設計ができるのではないでしょうか。特に大きなプロジェクトでたくさんのSassファイルをより見通しがよく管理する場合には必要性が高くなりそうですね。   移り変わりが早いフロントエンド界隈ですが、しっかり勉強していきたいと思います！今回の@useを使ったフロントエンド開発環境のソースコードはこちらに公開していますので、よければぜひ使ってみてください。   （参考にさせて頂いたサイト） Sassのモジュールシステムを@importから@useに移行する方法を考えてみた