Sassで数値から単位を除去する

Sassで単位のついた数値から単位を除去する方法をメモ。

サンプルコード

Sassの関数で以下のように設定します。

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

2行目のifはtype-ofで値の型がnumberかどうか、not unitlessで値に単位が付いているかどうかを確認しています。
単位付きの数値の場合は3行目で単位を除去して返す、それ以外は5行目でそのまま値を返しています。

数値から単位を除去したい場合、同じ単位の数値で割ると単位が除去されます。
($number * 0 + 1) で値が1で同じ単位がついた状態にした上で、$numberを同じ単位のついた1で割ることで、数値はそのままで単位のみ除去しています。

これで数値から単位を除去することができました。

$test: strip-unit(100px); // 100
$test: strip-unit(3em); // 3
$test: strip-unit(2rem); // 2
$test: strip-unit(50px + 30px); // 80
$test: strip-unit(aaa); // aaa