おはこんばんにちは、しょうみゆです。
今日はみんなが大好きなSassのお話です。
node.jsで使用しているnode-sass（LibSass）が2020年に非推奨になり、『Dart Sassに移行しなければ』という声も多く聞こえてくるようになりました。
ただし、移行するといっても@importから@useに置換すればいいという単純なものではなく、既存のプロジェクトをメンテナンスするとなると結構めんどくさいんですよね。
ところがどっこい、諦めることなかれ！
一括で自動的に移行してくれる便利でスーパーインテリジェンスなパッケージを見つけたので紹介しようと思います。
それがsass-migratorです！
まずは試しに実装してみましょう。
DartSassで出来る内容や移行する内容などは下記の記事で詳しく説明されているので割愛します。
外部の記事ですが、よかったら覗いてみてください。
[LibSass非推奨化] node-sassとのお別れ ~ Dart Sassへ移行する
Contents
環境
node v16.4.2
yarn 1.22.4
sassをインストールする
まずはsassをインストールします。
node-sassとsassがありますが、今回はDartSassを使用するのでsassの方をインストールします。
$ yarn add -D sassLibSass記法でファイルを用意する
今回は一括移行という内容なのでLibSassで書いたSassを用意します。
Sassファイルのパスはご自身のプロジェクトに合わせて変更してください。
今回は試しに3つ用意します。
@import "./modules/variables";
@import "./modules/base";// color
$color-black: #1c1c1c;
$color-white: #fff;
$color-off-white: #fafafa;
// background
$color-body-background: $color-off-white;
// font-size
$font-size-base: 1rem;
// text
$base-text-color: $color-black;
$sub-text-color: $color-white;
$base-font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka",
"メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;html {
box-sizing: border-box;
height: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
height: 100%;
font-family: $base-font-family;
font-style: normal;
font-weight: 400;
font-size: $font-size-base;
line-height: 1.5;
color: $base-text-color;
letter-spacing: 0.05em;
background-color: $color-body-background;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: inherit;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
strong {
font-weight: bold;
}
input,
textarea {
max-width: 100%;
font-family: inherit;
font-size: 100%;
}
sass-migratorをインストールする
今回の主役のsass-migratorをインストールしましょう。
$ yarn add -D sass-migratorLibSassからDartSassに一括移行する！
準備は全て整ったのでいよいよ移行しましょう！
関連しているファイルも全て変更してくれるので、main.scssだけ指定すればOKです。
$ yarn sass-migrator --migrate-deps module ./assets/scss/main.scss
✨ Done in 0.98s.LibSassで作成したファイルを見てみましょう。
同じように作成していればmain.scssと_base.scssの内容に変化があるはずです。
まずmain.scssは@importルールから@useルールに自動で変更されました。
@use "./modules/variables";
@use "./modules/base";
_base.scssは_variables.scssで定義している変数を使用しているので、_variables.scssを読み込み、変数名に名前空間を自動で付けてくれました。
@use "variables";
html {
box-sizing: border-box;
height: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
height: 100%;
font-family: variables.$base-font-family;
font-style: normal;
font-weight: 400;
font-size: variables.$font-size-base;
line-height: 1.5;
color: variables.$base-text-color;
letter-spacing: 0.05em;
background-color: variables.$color-body-background;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: inherit;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
strong {
font-weight: bold;
}
input,
textarea {
max-width: 100%;
font-family: inherit;
font-size: 100%;
}
今回はSassのファイル数が少ないのであまり実感がわかないかもしれませんが、10、20くらいのファイル数になってくると、とても恩恵を感じるのではないでしょうか。これはとっても便利〜〜！
Sass Migratorについて
sass-migratorは公式で詳しく説明されています。英語ですが😇
Migrator – Sass
コマンドラインで指定できるsass-migratorのオプション
--migrate-deps
コマンドラインで直接指定したファイルだけではなく、@useルール、@forwardルール、@importルールを使って依存しているスタイルシートも変更します。
--dry-run
このオプションをつけて実行するとファイル自体に変更は起こりません。通常は--verboseオプションと組み合わせて、どのファイルに変更があるのかを確認するのに使用することができます。
一度マイグレーションの実行をしてしまうと戻すのも大変なので、事前に確認しなければならない、慎重にならないといけないなどの場面で使えるかと思います。
$ yarn sass-migrator --dry-run --verbose module ./assets/scss/main.scss
Dry run. Logging migrated files instead of overwriting...
<===> assets/scss/main.scss
@use "./modules/functions";
@use "./modules/variables";
@use "./modules/mixins";
@use "./modules/reset";
@use "./modules/base";
✨ Done in 0.41s.--verbose
このオプションを指定するとコンソール（ターミナル）に変更があったファイル名を表示します。
$ yarn sass-migrator --verbose module ./assets/scss/main.scss
Migrating assets/scss/main.scss
✨ Done in 0.65s.他にも２つ紹介されていましたが、あまり使わなそうだったので割愛します。
興味があれば公式を覗いてみてください。
Migrator #Global Options – Sass
最後に
sass-migratorがまだあまり知られていないのか、記事は少なめなので公式を見て頑張ることになりそうです。
一度移行すると、@importとかは再度実行すれば@useにまた変更されましたが、変数についてる名前空間をとって再実行しても変更されませんでした。
こちらは一回のみで移行したら終わりなのか、それともコマンドが悪いのか分かっていないので、何か分かったらまた更新しようと思います。
公式の冒頭にも下記のように書かれているので、なんだか出来そうな感じはしたのですが・・・うむむ
The Sass migrator automatically updates your Sass files to help you move on to the latest and greatest version of the language. Each of its commands migrates a single feature, to give you as much control as possible over what you update and when.
【訳】Sass migratorは、Sassファイルを自動的に更新し、Sass言語の最新かつ最高のバージョンに移行できるようにします。それぞれのコマンドは1つの機能を移行し、いつ、何を更新するかをできる限りコントロールできるようになっています。
Migrator – Sass
てことで、今回はDartSassへの一括移行の話でした！ひとつずつ移行するのがめんどくさかったり、大量のSassファイルがある場合など、ぜひ試してみてください。