去除单位函数

Sass 中单位的工作方式存在很多混淆。然而，它们的工作方式与现实生活中完全相同。如果你想删除值的单位，你必须将其除以 1 个单位。例如，要删除 42cm 的 cm 单位，你必须将其除以 1cm。在 Sass 中也是一样的。

$length: 42px;
$value: $length / 1px;
// -> 42

但如果你不知道正在使用的单位呢？假设它可以是任何东西，从像素到 em 甚至 vw 和 ch。然后我们需要在一个函数中抽象逻辑。

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

计算可能看起来很奇怪，但它实际上是有意义的。为了获得 $number 单位的 1，我们可以将 $number 乘以 0，然后加 1。

用法

$length: 42px;
$value: strip-unit($length);
// -> 42