【備忘録】Sass割り算(/)非推奨→math.div()への移行メモ

問題

Rails + Sass（SCSS）で開発中に、こんな警告が出ました。

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

なぜ非推奨？

• CSS新仕様では / はセパレーターとして使用
• 例：grid-row: span 3 / 7 や hsl(0 100% 50% / 0.5)
• Sassの割り算とセパレーターの使い分けが曖昧だった
• → / はセパレーター専用、割り算は math.div() に統一

修正前（警告が出るコード）

$avatar-size: 40px;
$back-icon-size: 16px;

.header_logos img {
  margin: ($avatar-size - $back-icon-size) / 2 8px 0; // ← 警告対象
}

修正後

@use "sass:math";  // ← 追加

$avatar-size: 40px;
$back-icon-size: 16px;

.header_logos img {
  margin: math.div($avatar-size - $back-icon-size, 2) 8px 0; // ← 修正
}

修正手順

1. mathモジュールをインポート

   @use "sass:math";
   

2. 割り算を置き換え

   // 修正前
   width: $value / 2;
   
   // 修正後  
   width: math.div($value, 2);
   

よくあるパターン

修正前	修正後
width: 100% / 3	width: math.div(100%, 3)
margin: 10px / 2	margin: math.div(10px, 2)
($a - $b) / 2	math.div($a - $b, 2)

注意点

calc()内はそのままでいいみたい

width: calc(100% / 3); // 修正不要

引数の順番に注意する

math.div(割られる数, 割る数)

自動変換ツールというものがある

npm install -g sass-migrator
sass-migrator division **/*.scss

今後

• 現時点では動作するけど、警告が出る, 将来的には動作しなくなる可能性があるらしい
• 「Dart Sass 2.0.0 で / を使った割り算が削除される」という方針らしい

参考

• Sass公式: Breaking Change: Slash as Division
• sass:math モジュール

メモ

必ず @use "sass:math"; の追加をする。

---

初学者のため、間違えていたらすいません。