【SCSS】@useと@importの違い

はじめに

見るわりに説明できなかったので、調べてまとめることにしました。

結論

どちらも分割されたファイルを読み込むときに使いますが、@useは@importの使いづらい部分を補完したもの。現在@importは公式非推奨となっています。

具体例

style.scssというファイルに_variables.scssと_common.scssを読み込むと想定します。

① どこに何を定義したかの分かりやすさ

@importで書いたもの

style.scss

@import 'variables';
@import 'common';

.content {
  background: $color;
}
// $colorってどこで定義しとったっけ

@useで書いたもの

style.scss

@use 'variables';
@use 'common';

.content {
  background: variables.$color;
}
// variablesに$colorの記述がある

② グローバル汚染の防ぎやすさ

もし参照先がこの様に書かれていた場合……。

_variables.scss

$color: #fff;

_common.scss

$color: #000;

@importだと読み込み順が後のcommonに上書きされ、backgroundは#000が反映されます。@useは変数や関数等をカプセル化してくれるため、variablesにある#fffを持ってくることができます。

③ その他

他にもコンパイルにかかる時間が@importの方が長くなりやすい、CSSやスタイルシート名の重複リスク等で違いがあるようです。詳細については参考サイトをご覧ください。

おわりに

今更感なのですが、特に理由がなければ@useを使おう。

参考

• 「【Sass】@importは廃止！@use の基本的な書き方とベストプラクティス」
  https://weseek.co.jp/tech/3898/
• 「Sassの@importの問題点を理解する。」
  https://note.com/minamitakao_web/n/ne1ae75772e0a
• 「@use と@forwardの違い、使い分けについて(Sass)」
  https://zenn.dev/taketooon/articles/fa77fcbd3ba4b9