Sassを@importから@useや@forwardに置き換える

Sassの公式サイトで今後はDartSassを使うことが推奨とされると発表がありました。それに伴ってSassの初期の方から実装されていた@importが廃止予定になりました。とても便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面などがありSassでの@importは廃止予定になりました。

その代わりに@useや@forwardといった新しいモジュールが使えるようになりました。大きな違いは「変数や関数などの有効範囲」です。

@importではこれらの有効範囲はグローバル（ファイル間を横断出来る）ですが、@useでは有効範囲がローカル（指定したファイルのみに適用）になってしまいます。
有効範囲が広い方が一見便利なように思えますが、有効範囲が広い分、変数が上書きされてしまうという危険性があります。

vs codeでDartSassを使う

@importと@useの記述の違い

・これまでの@importの場合

_color.scss

$red:#F00;

style.scss

@import “color”

h1{
　color:.$red;
}

・@useの場合

_color.scss

$red:#F00;

style.scss

@use “color“

h1{
　color:.color.$red;
}

@useの場合、他のファイルで設定された変数を呼び出すには、変数名だけで無く、呼び出したい変数が登録されているファイル名を変数の前に付ける必要があります。

_color.scssに$redという変数が登録されている場合は以下の形で呼び出す事が出来ます。

「color.$red」

・@forwardの場合

変数に別々の名前を付けるのはとても大変なので、変数などを_import.scssにまとめて、@useではなく@forwardで読み込むようにする事で変数の前に付ける名前を1つにまとめる事が出来ます。

<_import.scss>
@forward “color”;
@forward “mixin”;

@use “reset”;
@use “import” as f;

h1{
　color:f.$red;
　@include f.tablet{
　color:f.$green;
　}
}