[Sass] 新しいバージョンからの変更 @importから@use,@forwordへの移行などのメモ

こちらのメモは@importなどが廃止予定に伴う簡易的な移行のメモ書きです。

@importの非推奨に伴う@use、@forwardへの変更

1. @useでの読み込み方法

@useで読み込んだ場合、変数名やmixinなどを使う際に名前空間を追加して使用する形になります（そうしないとエラーになる）。

名前空間は通常はファイル名となります。

@useの使用例

//_variables.scss
$backgroundColor: #efefef;

//style.scss
@use "./variables";

.box {
	//ファイル名variablesが名前空間になる
	background:variables.$backgroundColor;
}

名前空間の変更

名前空間はasを使い変更することが可能となります。
以下のように短い名前に変更することでタイプの量を減らせることも出来ます。

名前空間の使用例

//_variables.scss
$backgroundColor: #efefef;

//style.scss
@use "./variables" as var;

.box {
	//asを使い短い名前空間にすることも可能
	background:var.$backgroundColor;
}

値の読み込み先での変更

withを使い読み込み先のファイル上で値を変更することも出来ます。

withでの値の変更例

//variable.scss
$widthSmall: 480px;
$widthMiddle: 960px;
$widthLarge: 1400px !default;//!defaultがあるものだけ変更が可能

//style.scss
@use "./variable" with(
	$widthLarge:1280px;
	);

.box {
	min-width:variable.$widthLarge;//1280pxとなる
}

以下のようなSass公式サイトのサンプルのような使い方など参考になります。

//以下公式より
//_library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

//style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

出力CSS

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

公式へ

2. @forwardの使い方

@useでは、読み込んだ先ファイルでのみでしか変数やmixinが使えません。
読み込んだファイルをさらに読み込んだ場合ではエラーになります。

エラーになる例

//_variables.scss
$size1:300px;
$size2:600px;

//_first.scss
@use "variables";

//_second.scss
@use "first" as var;

.box_2 {
	width:var.$size2;//エラーになる
}

そこで@forwardを使います。

@forwardを使った例）

//_first.scss
@forward "variables";

//_second.scss
@use "first" as var;
.box_2 {
	width:var.$size2;//エラーにならない
}

このように@forwardではデータ（値）の受け渡しをするハブのような形での使用となります。

また、受け渡しの際に接頭辞（プレフィックス）を付けることも出来ます。

接頭辞を付ける例

//_font.scss
$size: 16px;

//_forward.scss
@forward "font" as fz-*;//接頭辞（プレフィックス）

//style.scss
@use "forward" as var;

p {
	font-size:var.$fz-size;
}

また、@useと同じくwithを使い!defaultで設定した値を上書きすることもできます。

withで上書きする例

//_font.scss
$base: 1rem !default;

$size: $base;

```Scss
//_forward.scss
@forward "font" with(
	$base: 1.2rem !default;
	);

//style.scss
@use "forward" as var;

p {
	font-size:var.$size;
}

Sass公式サイト

グローバル関数の廃止とビルトインモジュール

今まで使用されていたグローバル関数は廃止対象となります。
そしてグローバル関数はモジュール化され、「ビルトインモジュール」と変更されます。

モジュール化により、通常のCSSとSassの関数が競合せずに扱えるようになりました。
そのためSassの新しい関数の追加が楽になり、今後新しいモジュールも追加される予定だそうです。

ビルトインモジュールの使い方は、@useを使用してモジュールを読み込み、関数を使用します。

@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

.button {
  color: #6b717f;
  border: 1px solid #878d9a;
}

その他詳しくは、公式で確認できます。