Dart-sass @useと@forward

sassといってもコンパイル方法が3つに分かれます。

・Ruby Sass --- Ruby製。2019年3月にサポート終了。
・LibSass(node-sass) --- C++製。2020年10月に非推奨。早くて2022年くらいにサポート終了している可能性がある。
・Dart Sass --- Dart製です。現在、Sass公式が推奨しています。

Sassの公式ブログで、LibSassは非推奨宣言されていたので、まだ使われている方は早めに推奨されているDart Sassに移行した方が良さそうです。

Dart Sassで変わること

Dart Sassに変わったことで大きく変わることはグローバル変数が使えないということです。
今まで@importで書いていた記述を@useと@forwardに移行する必要があります。

@importは完全に廃止されることが決定しています。
なので、@importから@useへの乗り換えをスムーズにするために、早いうちにLibSassからDart Dassへの乗り換えをしておいた方が良さそうです。

利用方法

@use

@useルールはメンバー(変数、関数、Mixins)をカプセル化し、読み込んだスタイルシートのみに適用させます。
また@useで読み込んだファイル名が名前空間になり、その名前空間から各メンバーを参照できます。

 @use "variables";
 @use "mixins";
 
 .element {
   background-image: url(variables.$filePathStrawberry + 'assets/images/common/img_logo.jpg');
   
   @include mixins.mq(mdless) {
   	 background-image: none;
	  }
 }

名前空間はas節によって変更可能です。

 @use "variables" as v;
 @use "mixins" as r;
 
 .element {
   background-image: url(v.$filePathStrawberry + 'assets/images/common/img_logo.jpg');
   
   @include r.mq(mdless) {
   	 background-image: none;
	  }
 }

ディレクトリ名はちがうけど、名前が同じファイルを読み込む時、名前空間を変えないとエラーになります。

 @use 'variables/main';//エラー
 @use 'functions/main';//エラー

さらに

 @use 'variables/main' as variables;//名前空間を変える
 @use 'functions/main' as functions;//名前空間を変える

カプセル化の影響によって、変数はグローバルに適用されなくなりました。
変数を外部から変更する場合は、with節を使います。!defaultフラグが使用されている変数のみを変更できます。

 $inner-width: 140rem !default; // ここだけ変更可能;

 @use "base" with (//widthで変更
   $inner-width: 160rem
 );

@useで読み込むと変数やMixinsといったメンバーは、読み込んだファイル以外は、参照できません。
孫の変数を出力しようとしている下記のコードはエラーとなります。

_color.scss

$main-color: #f00;

_base.scss
 
 @use 'color';
 @use 'animation';
 @use 'button';

_styles.scss
 
 @use 'base';
 
 .c-text{
   color: base.color.$main-color;//エラーになります
 }

@forward

@forwardは上記のような場合にハブとなるファイル(_base.scss)に使用します。

_color.scss

$main-color: #f00;

_base.scss
 
 @forward 'color';
 @forward 'animation';
 @forward 'button';

_styles.scss
 
 @use 'base';
 
 .c-text{
   color: base.color.$main-color;//#f00
 }

このように、ハブとなるファイルで@useの代わりに@forwardを使用すると、エラーが出ることなく変数を呼び出せます。

@forwardにはもう一つ特徴があります。それは、読み込み元からはアクセスできないという点です。
例えば下記の場合にエラーが起こります。

_color.scss

$main-color: #f00;

_base.scss

@forward 'color';
 
body{
  color: color.$main-color;//エラーになります
}

@forwardはスコープを転送しているので、_base.scssからはアクセスできません。

なので、変数ファイルを外に出し、_base.scssからもアクセスしたい場合は、
@forwardと@useを併記します。

_color.scss

$main-color: #f00;

_base.scss
 
 @forward 'color';
 @use 'color';
 
 body{
   color: color.$main-color;//エラーになります
 }

これで_base.scssからも元ファイルの変数にアクセスできます。

まとめ

@useで読み込むと、変数やMixinsといったメンバーは、読み込んだファイル以外は参照できないです。
なので、さらに他のファイルから読まれることを前提とする場合は、@forwardと併記して上手に使い分けましょう
また、@forwardはスコープを転送しているので、読み込み元からはアクセスできないという特徴があります。