HTML/CSS

【対処法】sassで「DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.」というWarningが出た!

皆さんは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ステップで修正できますよ。

  1. @useでsass:mathを追加する
  2. /で割っている箇所を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を忘れずに!

以上です。それでは!