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

webあれこれ

これまで何となくSassを使っていた方は、おそらくLive Sassだと思います。
そのLive Sassが2022年10月にサポートが終了!とのことですので、

自分もLive Sass からDart Sassへ移行することにしました。

参考文献

Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年あります

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の公式サイトをチェックすると確認できます。

gulp-dart-sass
Gulp plugin for sass. Latest version: 1.0.2, last published: 2 years ago. Start using gulp-dart-sass in your project by running `npm i gulp-dart-sass`. There ar...

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さんの記事がわかりやすい!

Dart Sass、使ってる?Preprosを使えばコンパイルも楽勝!
最近Sass界隈が賑わっているように感じます。おそらく「Sassを@importから@useに置き換えるための手引き」という記事でDart Sassダートサスの存在を知った方も多いでしょう。今回はそんなDart Sass
@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";

大規模なサイトに取り掛かるときはこちらの方法がわかりやすいと思いました!

タイトルとURLをコピーしました