Sassの除算はsass:mathを使用しよう

Sass（SCSS）を使用しはじめて何年か経ちますが、
v1.32からv1.36へアップデートを行った時に以下のようなエラーをはいていることに気づきました。

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

これまでSCSS上で計算式を使用するときは「+」「－」「*（乗算）」「/（除算）」を使っていましたが
https://sass-lang.com/documentation/breaking-changes/slash-divによると、
除算についてはsass:mathにあるdiv()を使って対応するとのことでした。

現状「/（除算）」はすでに非推奨となっており、将来的には使えなくなるようです。

使い方はいたって簡単！

@use "sass:math";　　←必須！

.list {
  margin: 0 math.div(33.6, 2);
}

これまでcalcで計算していた内容を()でくくって、/の代わりにカンマを使用します。
今後は「/（除算）」ではなく、『math.div(）』を使用するようにしましょう。

Share: