皆さんはSass（SCSS）使ってますか？
変数を使えたり、入れ子にできたりするので、エンジニアにとって書きやすいのがメリットですよね。
私も最近は頻繁にスタイルをいじっているので、Sassのありがたみを実感しています。
そんな便利なSassですが、先日いつも通りにスタイルを修正してWebpackでビルドしたところ、以下のようなwarningが表示されました。
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($hoge, $fuga)
More info and automated migrator: <https://sass-lang.com/d/slash-div>
╷
44 │ line-height: $hoge / $fuga;
│ ^^^^^^^^^^^^^
╵調べたところ、どうやら/での割り算が非推奨になったようです。
おすすめされている通りにmath.div()で割り算をするようにしたところ、問題なくビルドできるようになりました。
実は、リリース前のテスト中に今回のwarningが表示されてちょっと焦ってしまったので、同じように焦っている方向けに記事に残しておこうと思います。
そんなわけで、今回はSassで割り算をしようとした際に DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. が表示された場合の対処法について、ご紹介しますね。
今回のwarningが表示された環境は以下の通りです。
- sass@1.34.0
【原因】sass@1.33.0からは「/」での割り算は非推奨になった！
前書きの通り、Sassのビルド時に以下のwarningが表示されました。
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($hoge, $fuga)
More info and automated migrator: <https://sass-lang.com/d/slash-div>
╷
44 │ line-height: $hoge / $fuga;
│ ^^^^^^^^^^^^^
╵warningの内容を見る限り、どうやら割り算をするときは math.div() を使って欲しいみたいです。
公式を確認したところ、重大な変更として記載されていました。
Breaking Change: Slash as Division
since 1.33.0と記載されているので、今回の条件にも合致しますね。
/が非推奨になった理由としては、/が割り算を意味しているのか、セパレータを意味しているのか曖昧だからみたいです。
Today, Sass uses complex heuristics to figure out whether a / should be treated as division or a separator.
Breaking Change: Slash as Division
たしかに2021/10/4などのように日付を書く場合や、90/100などのように割合を表す場合にも使いますよね。
納得です。
ちなみに、現時点では/での割り算は非推奨なだけですが、今後は使えなくなるみたいです。
移行期間中とのこと。
Transition Period
To ease the transition, we’ve begun by adding the math.div() function. The / operator still does division for now, but it also prints a deprecation warning when it does so.
Breaking Change: Slash as Division
【対応方法】sass@1.33.0から、割り算をする際は「math.div()」を使用する！
それでは、指摘された通りに修正してみましょう。
2ステップで修正できますよ。
@useでsass:mathを追加する/で割っている箇所をmath.div()に置きかえる
簡単ですね！
今回の私の例でいいますと、以下のようになります。
@use "sass:math";
line-height: math.div($hoge / $fuga);修正してもう一度ビルドすると、無事にwarningが消えました。
これで一件落着ですね。
おわりに
今回はsassで DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. というwarningが表示された場合の原因と対処法について、ご紹介しました。
- sass@1.33.0以上からは、割り算には div.math() を使用する
- div.math() を使用する場合は@use sass:mathを忘れずに！
以上です。それでは！
