数字

Sass 中的数字有两个组成部分：数字本身及其单位。例如，在 16px 中，数字是 16，单位是 px。数字可以没有单位，也可以有复杂的单位。有关更多详细信息，请参见下面的单位。

  SCSS

  Sass

       游乐场SCSS 语法@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")

       游乐场Sass 语法@debug 100  // 100
@debug 0.8  // 0.8
@debug 16px  // 16px
@debug 5px * 2px  // 10px*px (read "square pixels")

Sass 数字支持与 CSS 数字相同的格式，包括科学计数法，它在数字与其 10 的幂之间用 e 表示。由于浏览器对科学计数法的支持在历史上一直不稳定，因此 Sass 始终将其编译为完全展开的数字。

  SCSS

  Sass

       游乐场SCSS 语法@debug 5.2e3; // 5200
@debug 6e-2; // 0.06

       游乐场Sass 语法@debug 5.2e3  // 5200
@debug 6e-2  // 0.06

⚠️ 注意！

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

单位单位永久链接

Sass 对基于真实世界单位计算的方式操作单位提供了强大的支持。当两个数字相乘时，它们的单位也会相乘。当一个数字除以另一个数字时，结果将从第一个数字获取其分子单位，从第二个数字获取其分母单位。一个数字可以在分子和/或分母中具有任意数量的单位。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:math';

@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

       游乐场Sass 语法@use 'sass:math'

@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 将抛出错误。

  SCSS

  Sass

       游乐场SCSS 语法// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

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

       游乐场Sass 语法// CSS defines one inch as 96 pixels.
@debug 1in + 6px  // 102px or 1.0625in

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

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

  SCSS

  Sass

  CSS

       游乐场SCSS 语法@use 'sass:math';

$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 语法@use 'sass:math'

$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)

CSS 输出.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

⚠️ 注意！

如果您的算术运算给您错误的单位，您可能需要检查您的数学运算。您可能遗漏了应该具有单位的量的单位！保持单位整洁可以让 Sass 在某些内容出错时提供有用的错误。

您应特别避免使用像 #{$number}px 这样的插值。这实际上并没有创建数字！它创建了一个看起来像数字的未加引号的字符串，但不能与任何数字运算或函数一起使用。尝试使您的数学运算保持单位整洁，以便 $number 已经具有单位 px，或者编写 $number * 1px。

⚠️ 注意！

Sass 中的百分比与其他每个单位的工作方式相同。它们不能与小数互换，因为在 CSS 中，小数和百分比表示不同的含义。例如，50% 是一个数字，其单位为 %，Sass 认为它与数字 0.5 不同。

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

精度精度永久链接

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 自 3.5.0 起

LibSass 和旧版本的 Ruby Sass 默认使用 5 位数字精度，但可以配置为使用不同的数字。建议用户将它们配置为 10 位数字，以获得更高的精度和向前兼容性。

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

小数点后数字的前十位将包含在生成的 CSS 中。
像 == 和 >= 这样的运算将认为两个数字是等价的，如果它们在小数点后第十位相同。
如果一个数字小于 0.0000000001 远离整数，则在像 list.nth() 这样的需要整数参数的函数中，它被认为是整数。

  SCSS

  Sass

       游乐场SCSS 语法@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1

       游乐场Sass 语法@debug 0.012345678912345  // 0.0123456789
@debug 0.01234567891 == 0.01234567899  // true
@debug 1.00000000009  // 1
@debug 0.99999999991  // 1

💡 趣闻

当数字在相关精度的地方使用时，会延迟四舍五入到 10 位数字的精度。这意味着数学函数将在内部使用完整的数值来避免累积额外的舍入误差。