【最新】SCSSの@importは廃止に！？@useとの違いについて解説！

「@import」といえば、SCSSで分割したファイルを読み込むおなじみの機能ですよね。

実はこのimport機能、2022年10月頃には廃止予定なんですけど知っていましたか….？

その代わりとして、「@use」という似たような機能がすでに導入されています。

つまり、今後もSCSSを使い続けるためには、@useとの違いや、移行方法についての情報が必要ということです。

そこで当記事では、基本的な使い方の解説や、@importと@useの違いなどを解説していきます！

それではいってみましょう！

@importとは

@importとは分割されたSassファイルを読み込み機能です。

このようにファイル内が分割されていても、@includeで一つのSCSSファイルに統合して、まとめてcssファイルにコンパイルすることができます。

@importの廃止予定時期

便利な@importですが、公式で廃止予定であることが明言されています。

（日本語訳）
Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後、いずれか早い方（遅くとも2021年10月1日）に、@importと、モジュールを介して行われる可能性のあるグローバルなコアライブラリ関数の呼び出しを非推奨にします。
この非推奨措置が実施されてから1年後（遅くとも2022年10月1日）には、@importとほとんどのグローバル関数のサポートを完全に終了します。これには、すべての実装のメジャーバージョンのリリースが必要になります。

Sass: The Module System is Launched

廃止予定時期は2022年10月頃です。

@importはなぜ廃止されるのか？

@importの抱えている問題点について、公式で言及されている内容を引用させていただきます。

スタイルを定義しているファイルの特定が困難

CSSが重複することがある

Even if you chose to explicitly import every stylesheet that defined members you used, you’d end up with duplicate CSS and strange side-effects, because stylesheets were reloaded from scratch every time they were imported.

Sass: The Module System is Launched

mixinや関数など定義しているスタイルシートすべて、インポートするたびに一から読み直されるため、CSSが重複してしまうことがある。

スタイルシート名が重複するリスク

It wasn’t safe to use terse and simple names because there was always a possibility that some other stylesheet elsewhere in your application would use the same name and mess up your logic. To be safe users had to manually add long, awkward namespaces to everything they defined.

Sass: The Module System is Launched

アプリケーション内の他のスタイルシートに同じ名前を使ってしまうリスクがある（importだとそれができてしまう）。

作業権限の管理

Library authors had no way to ensure that their private helpers wouldn’t be accessed by downstream users, causing confusion and backwards-compatibility headaches.

Sass: The Module System is Launched

ライブラリの作者は、自分のプライベートヘルパーが下流のユーザーからアクセスされないようにする方法がないため、混乱を招く可能性がある。

@extendとの関係

The @extend rule could affect any selector anywhere in the stylesheet, not just those that its author explicitly chose to extend.

Sass: The Module System is Launched

@extendもグローバルで使えるため、どのスタイルルールが拡張されるか予測しづらい。

他には？

CSSにも、@importという名称や機能性が重複しているものがあるため、使用時にSassなのかCSSなのかわかりにくいという点も問題としてあげられることがありました。

@useとは

@import同様、分割されたSassファイルを読み込むことができる機能ですが、上記の問題点を解決させるものとなっています。

変数やmixin、関数（ひとまとめにメンバーと呼びます）をカプセル化することで、読み込んだシートのみに、指定のスタイルを適用させられることが特徴です。

言い方を変えると、読み込んだファイル内でしか指定のファイルにアクセスできない仕様なので、@importのようにどのファイルでも読み込んだりはできません。

保守性を高めるためでもありますが、@importと比べると、使うための「手軽さ」は少々失われている印象です。

@useを使い始める前に

@useを使用するために、予め抑えておくべき知識があるので紹介します。

DartsSass

Sassにはベースとなる言語によって種類があり、その中でも公式が今後推奨していくと明言しているのが「Dart Sass」です。

@useを使用するには現状「Dart Sass」を使うしかありません。 ※今後LibSass（node-sass）にも実装される予定です

他のベース言語との違いやDart Sassを手軽に導入する方法については、こちらの記事で紹介しています。

カプセル化とは

オブジェクト指向のプログラミング言語で用いられる考え方（使い方）ですが、定義するコードをひとまとめにして、外部から干渉できなくする仕組みのことです。

まとめた状態を「カプセル」に例えている、ということですね。

@useでは、シートで定義したメンバーがカプセル化されるので、@importのようにどこから(どの位置から)でも呼び出すことはできません。

ファイルスコープ（参照範囲が絞られる）機能を持っている、とも言えます。

ちょっと分かりづらいと思うので、後で使い方の説明で具体的に触れていきます！

名前空間とは

どのファイルから呼ばれたものか定義するものです。

@useで読み込む際は、読み込んだファイル名がその名前空間になります。

@importと違って、読み込み時には値の前に名前空間を指定する必要があります。

@importと@useの使い方の違い

ここからは具体的な使い方を解説していきます。

// ディレクトリ構成
setting
|  |--color.scss
|
mixin
|  |--mixin.scss
|
base
|  |--base.scss
|
style.scss

// setting > color.scss
// ************************

$base-color: #909090;

// mixin > mixin.scss
// ************************

@mixin center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%);
}

SCSSの設定ファイル（color.scssとmixin.scss）で、上のように定義していたとします。

@importの使い方

// style.scss
// ************************

// setting
@import "setting/color";
// mixin
@import "mixin/mixin";
// base
@import "base/base";

読み込み用のstyle.scssファイルです。ここで読み込んだすべてのファイルをまとめてcssファイルにコンパイルします。

上から順に読み込まれるため、base.scssの時点では上二つのファイル内容はすでに読み込まれているため、定義された内容も使える状態になってます。

// base > base.scss
// ************************

p {
	color: $base-color;
}

div {
	@include center;
}

別ファイルで定義されてる内容は、値に直接記述すればOK。

/* コンパイル後 style.css */
p {
  color: #909090;
}

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

style.scssファイルに集約された内容が、まとめてコンパイルされます。

＠useの使い方

次に@useの場合です。今回はVSCodeのプラグインを使ってDart Sass環境を作っています。

// style.scss
// ************************

// setting
@use "setting/color";
// mixin
@use "mixin/mixin";
// base
@use "base/base";

上のように、@importを＠useに変えるだけでOKじゃないの？と思われる方もいるかもしれませんが、実はこれだけだとコンパイルエラーになります。

base.scssから、color.scssやmixin.scssのファイル内容を読み込むことはできません。

/* style.css */

/* ↓↓↓↓↓↓↓↓↓ */

/* コンパイルエラーになる！！！ */

その原因は上でも触れましたが、＠useで読み込む場合、そのファイルはカプセル化されるため、グローバルに（どこからでも）読み込むことができなくなっているからです。

読み込みには、

この2点の考え方が必要です。

つまりスタイルをあてるファイルの修正も必要になるので、base.scssに一手間加えます。

// base > base.scss
// ************************
@use "../setting/color";
@use "../mixin/mixin";

p {
	color: color.$base-color;
}

div {
	@include mixin.center;
}

上のように書けばコンパイルされます。

修正した点を解説していきます。

ファイル毎に@useで読み込み

@use "../setting/color";
@use "../mixin/mixin";

スタイリングするファイルの中でも、読み込みたいファイルを指定します。

この時、ファイル名（color.scssであれば「color」、mixin.scssであれば 「mixin」）が名前空間となります。

値の前に読み込む名前空間を指定

p {
	color: color.$base-color;
}

div {
	@include mixin.center;
}

値の「$base-color」はcolor.scssで指定されている内容なので、値の前に名前空間になるcolorと書き”.“（ドット）でつなぎます。

mixinの「center」はmixin.scssで指定されている内容なので、値の前に名前空間になるmixinと書き”.“（ドット）でつなぎます。

これで＠useを使ったファイル分割と読み込みの基本操作はOKです！

その他@useで知っておきたい使い方

名前空間をas節で変更

名前空間はファイル名になる、と書きましたが、as節を使うことで任意のものに変えることもできます。

// base > base.scss
// ************************
@use "../setting/color" as *;
@use "../mixin/mixin" as m;

p {
	color: $base-color;
}

div {
	@include m.center;
}

@useで読み込むファイルの後ろにasと記述し、スペースを空けて任意の文字列を指定します。

*(アスタリスク)を指定したものは名前空間を省略することもできます。

ディレクトリで分けてファイル名を同じにしていた場合などは、as節を使用して分かりやすい名前に変えておくと良いと思います（名前空間も短くできるので）

プライベートメンバー

名前が -（ハイフン）または_（アンダースコア）ではじまるメンバーは、他ファイルへの読み込みができず、宣言されたファイル内でしか使えません。

// setting > color.scss
// ************************

$base-color: #909090;
$-color: #000000;　

// base > base.scss
// ************************
@use "../setting/color";

p {
	color: color.$base-color;
}

div {
	color: color.$-color; // ←コンパイルエラーになる
}

// ************************
$-color: #000000;　
div {
	color: $-color; // 同ファイル内で宣言していれば使用可能
}

@forwardを使ってファイル内容を中継

@useの場合、定義元のファイルを、使いたいファイルから直接読み込みにいかないといけません。

そこで@forwardを使うと別ファイルを経由して定義したメンバーを読み込むことができます。

// setting > color.scss
// ************************

$accent-color: #b74545;

// mixin > mixin.scss
// ************************

@forward "../setting/color";

@forwardを使用し、mixin.scssファイル内でcolor.scssファイルを読み込みます。

// base > base.scss
// ************************

p {
	color: mixin.$accent-color;
}

そうすると、さらに別ファイルのbase.scssから指定の値を読み込むことができます。

/* コンパイル後 style.css */
p {
  color: #b74545;
}

@useを使うとsetting.scss→base.scssで読み込む必要があるものが、

@forwardを使えばsetting.scss→mixin.scss→base.scssと別ファイルを経由させることができます。

まとめ

@useは、@importと比べると指定方法の制限があります。

ただその分、スタイルをあてているファイルが、他のどのファイルに依存しているのかの特定が容易になります。

setting系のファイルの一部を修正した場合、ファイル毎の影響範囲（内容）が分かりやすくなるのは@importにはなかった保守面でのメリットかと思います。

慣れるまで時間がかかりそう（個人的には…）ですが、まだ@useを使ったことのない方も、この記事を見てチャレンジしてみましょう！

その他Sassで使える機能などは、こちらの記事で網羅的に解説していますので覗いてみてください！