これまで何となくSassを使っていた方は、おそらくLive Sassだと思います。
そのLive Sassが2022年10月にサポートが終了!とのことですので、
自分もLive Sass からDart Sassへ移行することにしました。
参考文献

目次
Dart Sass のインストール
gulp-dart-sassをインストールします。
npm install gulp-dart-sass --save-dev
Live Sassをアンインストールします。
npm uninstall gulp-sass
※『gulp-sass』でどこにもliveとかないけど、これがLive Sassのこと。
–save-dev て何?
package.jsonの中の項目分けみたいなもの。
dependencies(本番環境)なのか、devDependencies(開発環境)なのか?
"dependencies": {
// npm install コマンドを使ってインストールしたパッケージ
// 昔はsaveつけたりしてたが、今は自動的にこちらに入る
// 本番環境で使うパッケージ
},
"devDependencies": {
// npm install --save-dev コマンドを使ってインストールしたパッケージ
// 開発環境で使うパッケージ
}

いや、どっちかわからーん!!
開発環境で使うパッケージかどうかはnpmの公式サイトをチェックすると確認できます。

gulpfile.jsを変更する
//これは削除する
const sass = require('gulp-sass');
//これを追加する
const sass = require('gulp-dart-sass');
Live SassとDart Sassの違い
@importが使えなくなる・・・・だけー?
ただそれだけだと思っていましたが、Gulpが動かない・・・・

ちゃいますよー!
//これまで
@import "variables";
//これから
@use "variables"
使うときは
$accentColorW: #ED1E79;
.btn__accent {
background-color: $accentColorW;
color: #fff;
}
変数を同じファイルに記述する場合は、このままで問題なし。
変数をまとめたファイルを別で作る場合
変数を別ファイルで管理したい場合。
最初に @use "variables";
でパーシャルの指定をします。ファイル名は名前空間となって、実際に指定したい箇所で パーシャル名.変数名
と続けて記述します。参照元が明確になって、メンテナンスしやすいとのことです。
例えば、_variables.sass
※variablesは日本語で変数という意味
@use "variables"
.btn__accent {
background-color: variables.$accentColorW;
color: #fff;
}
//variablesの場合、長いのでasで変数を指定できる。
@use "variables" as vari;
.btn__accent {
background-color: vari.$accentColorW;
color: #fff;
}
※あくまでGulpを使うときの場合です。
Nuxtだったりフレームワークを使用してSassを使う場合は、また書き方は違います。
Sass 便利な使い方
map.getを使う
webcreatorboxさんの記事がわかりやすい!

@use "sass:map";
$colors: (
main-color: #f66,
sub-color: #fc2,
);
p {
color: map.get($colors, main-color);
}
$colorsで色をまとめて、map.get(マップ名, キー);
で呼び出し。
とても便利!!
@forwardを使う
mixinをファイルへ細分化する場合、それぞれでのファイルを@useするのは大変ですよね。
そこで@forwardを使うと便利!
参考文献
https://yumegori.com/dart-sass-method
|_sass/
|- global
| |- setting/(変数$を管理する)
| | |- _font-family.scss
| | |- _color.scss
| | |- _index.scss
| | |- …
| |
| |- mixin/(mixinの管理)
| | |- _breakpoint.scss
| | |- _animate.scss
| | |- _index.scss
| | |- …
| |
| |- _index.scss (settingとmixinフォルダを読み込む用)
|
globalディレクトリの直下に_index.scssを置いて、settingとmixinのフォルダを読み込む。
settingとmixinのフォルダ直下に_index.scssを置いてそれぞれのファイルを読み込む。
/*-- globalフォルダの直下の_index.scss --*/
@forward "setting";
@forward "mixin";
/*-- settingフォルダの中の_index.scss --*/
@forward "font-family";
@forward "color";
大規模なサイトに取り掛かるときはこちらの方法がわかりやすいと思いました!