function - How do you strip the unit from any number in SASS?

Question

I know you can strip units from numbers in SASS when you know the unit before-hand like this:

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

But is it possible to strip the unit from a number without knowing what the unit is first?

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

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

score 117 · Accepted Answer

--

更新：您实际上永远不需要使用此功能。Sass 数学在单位方面非常聪明，我从未见过这样的用例，其中剥离单位比简单地使用正确的数学来获得你需要的东西更好。请参阅Sass 问题线程，其中已对此进行了详细讨论。

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

--

您需要除以同一单位的 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。

score 0 · Accepted Answer

我认为您必须添加一个自定义 Ruby 函数来剥离单元（请参阅有关添加自定义函数的文档）。我认为它看起来像这样（警告，未经测试）：

module Sass::Script::Functions
  def strip_units(num)
    assert_type num, :Number
    Sass::Script::Number.new(num.value)
  end
end

score 0 · Accepted Answer

带单元 SASS 函数的唯一用例是编写单位转换函数时。我只发现它对于将 PX 转换为 EM/REM 的任务很有用，反之亦然。

您需要除以同一单位的 1。如果你使用 unit()，你会得到一个字符串而不是一个数字，但是如果你乘以零并加 1，你就会得到你需要的东西 - Miriam Suzanne

我相信 SASS 编译器对值的处理与 PHP 解释器的处理非常相似（尽管有警告），所以我认为上面的陈述是不正确的。如果您将字符串（以数字开头，例如'16px'）与数字值（或以数字开头的字符串值）相除或相乘，则字符串将转换为数字，以便编译器能够执行操作。

将字符串添加到数字也是如此，它将数字转换为字符串。

以下解决方案正确应用了此策略：

@function strip-unit($value) {
  @return $value / 1;
}

3 回答 3