おはこんばんにちは、しょうみゆです。
今日はみんなが大好きな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 sass
LibSass記法でファイルを用意する
今回は一括移行という内容なので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ゴシック", "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-migrator
LibSassから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.
他にも2つ紹介されていましたが、あまり使わなそうだったので割愛します。
興味があれば公式を覗いてみてください。
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ファイルがある場合など、ぜひ試してみてください。