まだ間に合う！@importから@useに移行しよう

はじめに

みなさんは普段からSassを使われていますか？
昨年公式から@importの廃止が発表され、サポート終了まで1年を切りました。

えっ？まだなにもしていない！という方もいらっしゃるかと思い、@importに変わる@useとはどんなものなのか、どう使うのかをご紹介していきます。

@import

まずこれまで使用してきた@importについて軽くおさらいします。

sassでは機能ごとファイルを分割して、style.scss内で読み込むことで、まとめて1つのcssファイルとしてコンパイルできます。

しかし、@import使った場合では定義された変数・mixin・関数（以下、メンバーとします）が、インポートされたすべてのスタイルシートで利用できるためどこで定義されていたのかがわからなくなってしまいます。
つまり、先に呼び出してさえいれば、この後参照するファイルすべてで呼び出しが可能ということです。

@use

@useが@importに代わるなら、置き換えればいいだけじゃないの？？

と考える方もいらっしゃるかと思いますが、@useは呼び出したファイルの中でしか読み込んだ内容を参照することができません。

また、読み込んだ内容を使用する箇所でも、どのファイルを参照するのか明記しなければなりません。
これは名前空間を利用することで解決できます。

名前空間

// @useを使用する際、名前空間を “as ~” で指定する
@use "config/variables" as v;

// プロパティの値に “名前空間.使用するメンバー” と書くことで呼び出せる
color: v.$main-color;

as以下で指定している名前空間名は省略することもできます。

// 名前空間は省略も可能。その場合参照したファイル名が名前空間となる
@use "config/variables";

color: variables.$main-color;

@importと@useの比較

では実際に@importと@useではどのように異なるのか見ていきましょう。

@importのとき

foundation/_variables.scss

$bg-color: #137cbd;
$text-color: #ffffff;

foundation/_mixin.scss

@mixin button {
	width: 300px;
	height: 45px;
	background-color: $bg-color;
	color: $text-color;
	font-size:16px;
}

style.scss

@import "foundation/variables";
@import "foundation/mixin";

これらをコンパイルします。

style.css

button {
	width: 300px;
	height: 45px;
	background-color: #137cbd;
	color: #ffffff;
	font-size:16px;
}

先述したとおり、@importではすべてのスタイルシートで参照が可能なため、style.scssにインポートすることで、すべて参照されています。

@useのとき

foundation/_variables.scss

$bg-color: #137cbd;
$text-color: #ffffff;

_mixin.scssで_variables.scssを参照するために@useを記載します。

foundation/_mixin.scss

@use "variables" as v;

@mixin button {
	width: 300px;
	height: 45px;
	background-color: v.$bg-color;
	color: v.$text-color;
	font-size:16px;
}

sytle.scssでは、_mixin.scssのみを参照します。

style.scss

@use "foundation/mixin" as m;
div {
	@include m.button;
}

このように各ファイルに ”どのファイルの”、”なにを” 使うかを明記する必要があります。

style.css

div {
	width: 300px;
	height: 45px;
	background-color: #137cbd;
	color: #ffffff;
	font-size:16px;
}

記述しなければならないものが増えてはしまいますが、
参照しているファイルがプロパティを見ればすぐにわかる点では運用がしやすいと思います。

プライベートメンバー

定義したファイル内でしか使えないメンバーも作成できます。
変数名の先頭に-（ハイフン）または_（アンダースコア）を付けます。

style.scss

$-radius: 3px;

div {
    @include m.button;
    border-radius: $-radius;
}

style.css

div {
	width: 300px;
	height: 45px;
	background-color: #137cbd;
	color: #ffffff;
	font-size:16px;
	border-radius: 3px;
}

_mixin.scss内のbuttonを呼び出した後のborder-radiusにプライベートメンバーの値が設定されました。

foundation/_parts.scss

$-radius: 5px;

@mixin rounding {
    border-radius: $-radius;
}

_parts.scss内で設定した$-radiusは

style.scss

@use "foundation/parts" as p;

div {
    @include p.rounding;

    // これはエラーになる
    padding: 5px + rounding.$-radius;
}

同じ_parts.scss内で定義したmixinには値が入りますが、_parts.scss外のファイルでは参照されません。

Dart sass

ここまで意気揚々と@useについてお話してきましたが、そもそも@useを使用するにはDart Sassを使用するしかありません。
今後LibSass(node-sass)でも実装予定となっておりますが、この点ご注意ください。

今回VSCodeで実装してみましたが、プラグインのDartJS Sass Compiler and Sass Watcherを利用しました。
↓こちらが大変わかりやすかったです。

おわりに

いかがでしたでしょうか。
実際の@importの廃止については、ユーザーのみなさんが移行完了した時に行う、と公式ドキュメントは言っています。
これに甘んじずみなさんの移行が完了するとともに、この記事が少しでもお役に立てたら嬉しいです。

参考

• https://sass-lang.com/blog/the-module-system-is-launched
• https://sass-lang.com/documentation/at-rules/use#loading-members