function - 如何从 SASS 中的任意数字中去除单位？

Question

我知道当你事先知道单位时，你可以从 SASS 中的数字中去掉单位，如下所示:

$number: 16px;
$without-unit: 16px / 1px;
@warn $without-unit; // 16

但是，在不知道单位是什么的情况下，是否可以从数字中删除单位？

@function strip-unit($number) {
  // magic code here...
}

@warn strip-unit(16px); // 16

Answer 1

--

更新:您实际上应该不需要使用此函数。 Sass 数学对于单位非常聪明，我从未见过剥离单位是比简单地使用正确的数学来获得所需内容更好的选择的用例。请参阅Sass issue thread对此进行了详细讨论。

这是一个聪明的函数，但如果你想使用它，那么你的数学可能有问题。不要依赖此功能。而是修正你的数学。

--

您需要除以 1 个相同单位。如果您使用 unit()，您将得到一个字符串而不是数字，但如果您乘以零并加 1，您就得到了您所需要的:

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

更新:在最新版本的 Sass 中，变为:

@use 'sass:math';

@function strip-units($number) {
  @return math.div($number, ($number * 0 + 1));
}

这有效。 strip-units(13.48cm) 将返回 13.48。