DartSassへの切り替えで変更した部分は2つ

※他にも変更点はありそうだが私が気をつけたのは2点です
※@importは 2022年10月1日には廃止 されるからまじで早く切り替えたほうがいい（ちなみに私は同僚に聞くまで知らなかった）

`@use`とは

読み込んだスタイルシートにのみに適用される。
たとえばcommon.scssにbutton.scssを読み込ませるときはこう。

@use "button";

コンパイルされたcommon.cssにはbutton.scssのスタイルが適用される。

common.scssに変数ファイルcolor.scssとbutton.scssを読み込ませて、button.scssで変数を使おうとするとエラーになる。

//　これだとcolorの変数をbuttonで使えない
@use "color";
@use "button";

// これならcolor.scssの変数が使える
// そして変数に@useの名前を参照させる
@use "color";
.button{
	color: color.$red;
}

// 任意の名前で参照する
@use "color" as c;
.button{
	color: c.$red;
}

// 参照を省略する
@use "color" as *;
.button{
	color: $red;
}

$red: #ff0000 !defalut;

@use "color" as * with(
	$red: #F30100;
);
.button{
	color: $red;
}

※変数ファイルが複数ある場合、毎回すべて読み込ませるのは面倒なのでこうゆうときに@forwardを使う

@useは、読み込ませたファイル内でしか変数を使うことができない。

例えば複数の変数ファイルがあって、それをいろんなファイルにすべて読み込ませるのはとても面倒。そんなときに1つのファイルにまとめてから読み込むことができるのが@forward

$red: #ff0000 ;

$small: 200px;

// @useだとできない
@forward "color" as * ;
@forward "size" as * ;

// color.scssとsize.scssを読み込んだvariable.scssを読み込む
@use "variable" as * ;
// colorとsize内の変数が使える
.button{
	color: $red;
	width: $small; 
}

@use "variable" as * with (
	$small: 100px;
) ;
// colorとsize内の変数が使える
.button{
	color: $red;
	width: $small;  // 100px
}

// エラーになる
@use "layout/_header";
@use "project/_header";

//エラーにならない
@use "layout/_header" as "l-header";
@use "project/_header" as "p-header";

@forward "layout/_header";
@forward "project/_header";

除算にだけmath.divを使用するのもあれなので
基本的にcalc()を使うことを推奨します。
calc()ではなくてもできる計算にもcalc()を統一性をもたせる、予期せぬエラーを防ぐためです。

math.div(100%, 3);  
calc( 100% / 3 )