如何在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

- jordanbtucker

---

让我惊讶的是，这不是核心SASS函数。 - Már Örlygsson

你可以使用来自 https://css-tricks.com/snippets/sass/strip-unit-function/ 的函数。 - Przemysław Szelenberger

Answer 1

--

更新: 实际上你不应该需要使用这个函数。Sass的数学计算非常智能，我从来没有见过去除单位比使用正确的数学方法更好的情况。请参阅在Sass问题讨论线程中详细讨论此问题。

虽然这是一个聪明的函数，但如果你感觉需要使用它，那么可能存在数学问题。不要依赖这个函数，改正你的数学计算。

--

你需要将数值除以相同单位的1。如果使用unit()函数，你得到的是字符串而不是数字，但如果乘以0并加上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。

- Miriam Suzanne

---

如果我在我的应用程序中使用这段代码（从您的示例中复制1：1），我会得到警告-->在@return语句的行号处出现“语法错误：未定义操作：“2.1875rem times 0”。因为似乎我不能使用SASS添加两个** rem **单元，所以我在另一个函数中使用此函数。 - herom

令我惊讶的是，SASS并没有默认提供这个函数。 - Már Örlygsson

@EricMSuzanne，这是一个真实的用例。我有一个断点地图（550px，1024px）。现在我想循环遍历该地图并为每个断点添加媒体查询。很容易。但是，我还想为每个断点添加一个类，例如.show-from-$var-up。我希望它解析为.show-from-550-up而不是.show-from-550px-up。 - JakeParis

如果您认为仅仅使用正确的数学比剥离单位更好，那么您可能没有见过所有的应用场景…… - feeela

使用情况：当图像URL需要一个没有“％”的亮度值。 - Jason

Answer 2

strip units SASS函数的唯一用例是编写单位转换函数。我只发现它在将PX转换为EM / REM和反之亦然的任务中非常有用。

您需要除以相同单位的1。如果使用unit（），则会得到字符串而不是数字，但如果乘以零并加1，则可以获得所需内容- Miriam Suzanne

我认为SASS编译器处理值的方式与PHP解释器非常相似（尽管有警告），因此我认为上面的说法是不正确的。如果将字符串（以数字开头，例如'16px'）与数字值（或以数字开头的字符串值）相除或相乘，则编译器会将字符串转换为数字以执行操作。

对于将字符串添加到数字，它会将数字转换为字符串。

以下解决方案正确地应用了这种策略：

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

- stamat

Answer 3

我认为您需要添加一个自定义的Ruby函数来去除单位（请参阅添加自定义函数上的文档）。我认为它应该是这样的（警告，未经测试）：

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

- hopper