数字 Numbers

例如，在 16px 中，数字是 16，单位是 px。 数字可以没有单位，也可以有复数单位。 有关详细信息，请参阅下面的 Units。

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")

Sass 数字支持与 CSS 数字相同的格式，包括 科学记数法，它在数字及其 10 的幂之间用一个“e”书写。因为支持 由于浏览器中的科学计数法历来参差不齐，Sass 总是将其编译为完全扩展的数字。

@debug 5.2e3; // 5200
@debug 6e-2; // 0.06

⚠️ 注意！

Sass 不区分整数和小数，因此例如 math.div(5, 2) 返回 2.5 而不是 2。 这与 JavaScript 的行为相同，但与许多其他编程语言不同。

单位

Sass 对根据真实世界的单位计算 的工作原理来操纵单位提供强大的支持。 当两个数字相乘时，它们的单位也会相乘。 当一个数字除以另一个数字时，结果采用第一个数字的分子单位和第二个数字的分母单位。 一个数字在分子和/或分母中可以有任意数量的单位。

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em);

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg

⚠️ 注意！

因为 CSS 不支持像方形像素这样的复杂单位，所以使用具有复杂单位的数字作为 属性值 会产生错误。 不过，这是伪装的功能； 如果你最终没有得到正确的单位，这通常意味着你的计算有问题！ 请记住，您始终可以使用 @debug 规则 检查任何变量或 表达式.

Sass 会自动在兼容的单位之间进行转换，尽管它会为结果选择哪个单位取决于您使用的 Sass 的实现。如果您尝试组合不兼容的单位，例如 1in + 1em，Sass 会抛出错误。

// CSS 将一英寸定义为 96 像素。
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

与现实世界中的单位计算一样，如果分子包含与分母中的单位兼容的单位(如 math.div(96px, 1in))，它们将相互抵消。 这样可以轻松定义可用于在单位之间进行转换的比率。 在下面的示例中，我们将所需速度设置为每 50 个像素一秒，然后将其乘以过渡覆盖的像素数以获得它应该花费的时间。

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

⚠️ 注意！

如果你的算术给你错误的单位，你可能需要检查你的数学。 您可能会为了应该拥有它们的数量而放弃单位！ 保持单元整洁可以让 Sass 在出现问题时给出有用的错误提示。

你应该特别避免使用像 #{$number}px 这样的插值。 这实际上并没有创建一个数字！ 它创建了一个未加引号的字符串_看起来_像一个数字，但不能与任何数字操作或函数一起使用 (/modules/math)。 尝试让你的数学单位干净，这样 $number 已经有单位 px，或者写 $number * 1px。

⚠️ 注意！

Sass 中的百分比就像所有其他单位一样工作。 它们_不能_与小数互换，因为在 CSS 中小数和百分比表示不同的东西。 例如，“50%”是以“%”为单位的数字，Sass 认为它不同于数字“0.5”。

您可以使用单位算术在小数和百分比之间进行转换。 math.div($percentage, 100%) 会返回相应的小数，$decimal * 100% 会返回相应的百分比。 您还可以使用 math.percentage() 函数 作为更明确的写法 $decimal * 100%。

Precision

Sass 数字在内部表示为 64 位浮点值。 在序列化为 CSS 时以及出于相等目的，它们支持小数点后最多 10 位精度。 这意味着一些不同的事情：

• 只有小数点后的前十位数字将包含在生成的 CSS 中。
• 像 == 和 >= 这样的操作将认为两个数字相等，如果它们相同直到 小数点后的第十位。
• 如果一个数字与整数的距离小于“0.0000000001”，则出于 list.nth() 之类的函数的目的，它被认为是一个整数需要 整数参数。

@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1

💡 有趣的事实：

当数字用在与精度相关的地方时，它们会被四舍五入到 10 位精度。 这意味着数学函数将在内部处理完整的数值，以避免累积额外的舍入误差。