りんのブログ

[プログラミング/副業/育児] 勉強とか趣味とか好きなこと書いてる雑記ブログ

Sassで数式に/を使うのは非推薦らしいという話

Sassを使ってcloud9でコーディングしていたらこんな警告が。

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size, 375) or calc($size / 375)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
32 │     font-size: ($size / 375) * 100vw;
   │                 ^^^^^^^^^^^
   ╵

なんだろうと思って調べたらSassでは割り算に/を使うのは非推薦らしい。


何故かというとグリッドレイアウトなどで区切り線として/を使うことがあり、意図しないところで割り算してしまう可能性があるからとのこと。


解決法としてmath.div またはcalcを使えばOK。
早速コードを変更してみると、今度はエラーが出た。

Error: There is no module with the namespace "math".
   ╷
32 │     font-size: (math.div($size, 375)) * 100vw;
   │                 ^^^^^^^^^^^^^^^^^^^^

@use 'sass:math';スタイルシートの最初に書かないと出るエラーらしい。

ということで、スタイルシートの最初に書いたらエラーがなくなりました。