Dart Sassのmath.div()で単位の有無が揃ってない場合にエラーになる

Dart Sassのmath.div()を使用した際、単位の有無によってエラーになることがあったので、対応方法をメモ。

サンプルコード

今回やりたかったことは、単位(px)の有無の混じった数値を除算して、パーセント表示にするという内容になります。

まずは通常通りの指定をいくつかのパターンで試してみます。
試したのは以下の4つのパターンで、最後のコメントアウトにしている部分が出力結果です。

@use "sass:math";
.test {
  width: percentage(math.div(600px, 1000px)); // 60%
  width: percentage(math.div(600, 1000)); // 60%
  width: percentage(math.div(600px, 1000)); // Error: $number: Expected 0.6px to have no units.
  width: percentage(math.div(600, 1000px)); // Error: $number: Expected 0.6px^-1 to have no units.
}

3つ目と4つ目の単位が揃っていない場合にエラーになりました。
percentage()を使ってパーセント表示にする前の状態も確認してみます。

@use "sass:math";
.test {
  width: math.div(600px, 1000px); // 0.6
  width: math.div(600, 1000); // 0.6
  width: math.div(600px, 1000); // 0.6px
  width: math.div(600, 1000px); // Error: 0.6px^-1 isn't a valid CSS value.
}

1つ目と2つ目は意図した通りの結果ですが、3つ目は単位付きでの出力、4つ目はエラーになりました。
単位の有無を揃えることでも回避はできますが、変数に値を入れている場合など単位の有無を混同したい場合もあるので、単位の有無を混同して使用できる関数を作成してみます。

@use "sass:math";
// 数値から単位を除去して返す
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return math.div($number, ($number * 0 + 1));
  }
  @return $number;
}

// 除算してパーセント値を返す
@function percent($num1, $num2) {
  $n1: strip-unit($num1);
  $n2: strip-unit($num2);
  @return percentage(math.div($n1, $n2));
}

percent()とstrip-unit()という関数を作成しました。
処理内容としてはコメントに書いてある通りですが、percent()の方で受け取った引数をstrip-unit()の関数で単位を除去した状態にして、除算した結果を返します。
先ほどの例をpercent()の関数に変更してみます。

.test {
  width: percent(600px, 1000px); // 60%
  width: percent(600, 1000); // 60%
  width: percent(600px, 1000); // 60%
  width: percent(600, 1000px); // 60%
}

これで単位の有無に関わらず、意図した結果での出力になりました。