你如何从 SASS 中的任何数字中去除单位？答案

【问题标题】：How do you strip the unit from any number in SASS?你如何从 SASS 中的任何数字中去除单位？
【发布时间】：2012-09-01 22:28:49
【问题描述】：

我知道当你事先知道单位时，你可以从 SASS 中的数字中删除单位，如下所示：

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

但是是否可以在不知道第一个单位的情况下从数字中删除单位？

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

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

【问题讨论】：

【解决方案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。

【讨论】：

@EricMeyer 如果我在我的应用程序中使用此代码（从您的示例中以 1:1 复制）我会收到此警告 --> Syntax error: Undefined operation: "2.1875rem times 0" 在 @return 语句的行号处。 . 我在另一个函数中使用这个函数，因为我似乎无法使用 SASS 添加两个 rem 单位...
让我吃惊的是，SASS 没有开箱即用地提供这个功能。
@EricMSuzanne，这是一个真实的用例。我有一张断点图(550px,1024px)。现在我想遍历该地图并为每个地图添加一个媒体查询。简单。但是我还想为每个断点添加一个类，比如.show-from-$var-up。我希望将其解析为 .show-from-550-up 而不是 .show-from-550px-up。
»从未见过这样的用例，其中剥离单元比简单地使用正确的数学更好«那你不知道所有用例......
用例：当一个图片 url 需要一个没有 % 的亮度值时。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

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

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

【讨论】：