Sassで@importが使えなくなる！！

Sassでファイルを読み込むときに使っていた｢@import｣が廃止されるようです。
遅くとも2021年10月1日には非推奨になり、遅くとも2022年10月1日にはサポートを終了するのだとか。
｢遅くとも｣というのが気になりますね。これは早急に対策しておかねば！！

@useを使う

これからは｢@import｣の代わりに｢@use｣などを使わなければならなくなりそうです。
良かった、代替えできるものがあるんだ。だがしかし、｢@import｣を｢@use｣に書き換えるだけではダメみたいなんです。
｢@import｣は読み込むだけで、変数を使うことが出来ましたが、｢@use｣では読み込んでいるファイルを指定してからでないと変数を使うことができないのです。

■_variables.scss
$main-color: #f00;

｢@import｣を使った場合

■style.css
@import "variables";
.hoge{
  color: $main-color;
}

｢@use｣を使った場合
読み込んだファイルを指定する。
この時のファイル名を｢名前空間｣というらしいです。

■style.css
@use "variables";
.hoge{
  color: variables.$main-color;
}

名前空間は自分で設定することもできます。｢v｣が名前空間。

■style.css
@use "variables" as v;
.hoge{
  color: v.$main-color;
}

VSCodeのLive Sass Compiler では@useはサポート外！！

そんな感じで、｢@use｣をテストしようとするのですが、Compilation Error が…。
変数が定義されてないといわれてしまいます。
調べてみると、Live Sass Compilerでは｢@use｣は、まだ、サポート外のようです。
対策するのが早すぎたのかもしれない。
Live Sass Compiler がサポートするまで、待ってみようかな。
最悪の場合、インポートしていたファイルを一つのファイルに記述しちゃえばいいんだから…。
そう考えたら、焦りもなくなりました。