【Gulp】Live Sass からDart Sassへ移行！

npm install gulp-dart-sass --save-dev

npm uninstall gulp-sass

"dependencies": {
  // npm install コマンドを使ってインストールしたパッケージ
  // 昔はsaveつけたりしてたが、今は自動的にこちらに入る
  // 本番環境で使うパッケージ
},
"devDependencies": {
  // npm install --save-dev コマンドを使ってインストールしたパッケージ
  // 開発環境で使うパッケージ
}

//これは削除する
const sass = require('gulp-sass');

//これを追加する
const sass = require('gulp-dart-sass');

//これまで
@import "variables";

//これから
@use "variables"

$accentColorW: #ED1E79;
.btn__accent {
	background-color: $accentColorW;
	color: #fff;
}

@use "variables"

.btn__accent {
	background-color: variables.$accentColorW;
	color: #fff;
}


//variablesの場合、長いのでasで変数を指定できる。
@use "variables" as vari;
.btn__accent {
	background-color: vari.$accentColorW;
	color: #fff;
}

@use "sass:map";
 
$colors: (
  main-color: #f66,
  sub-color: #fc2,
);
 
p {
  color: map.get($colors, main-color);
}

|_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 --*/
@forward "setting";
@forward "mixin";

/*-- settingフォルダの中の_index.scss --*/
@forward "font-family";
@forward "color";