sass(dart sass)で数字の単位を除外する方法

sassで数字の単位を除く方法について書きます。
数字から単位を除くことで、フォントサイズをpx  →  remに直感的に変換出来てとても楽です。

コードはこちら↓

//function.scss
@use 'sass: math';
@use 'sass: meta';
//各モジュールを読み込む

@function strip-unit($number){
//「単位を除く」という意味の自作関数、($number)に単位を除外したい数値を入れる
  @if meta.type-of($number) == 'number' and not math.is-unitless($number){
  //条件分岐。もし$numberが数値型変数で、単位がある数字ならば
    @return math.div($number, ($number * 0 + 1));
    //例えば $numberが16pxなら、「16px ÷ (16px * 0 + 1) = 16px ÷ 1px」 になる
  }
  @return $number;
  条件に当てはまらなければ、そのまま$numberを返す
}

sassモジュール

dart sassはモジュールという、関数や変数などをまとめたものがあります。
それを、@useを使って冒頭で読み込ませています。

同じ単位同士の除算

strip-unit(単位を除く)という名前で関数を作ります。
名前はなんでもいいですが、中身が推測できるような関数名が良いですね

引数の $numberが数値型変数がどうか、単位はあるのかをif文で検証し、
trueなら、同じ単位の1で除算します。
例えば $numberが16pxなら、16px ÷ 1pxになります。
falseなら、そのまま数値を返します。

sassの場合、同じ単位の数値同士で除算すると、単位が削除されるという特性があります。
つまり 16px ÷ 1px = 16 という事になります。