数字（Numbers）

Sass 中的数字有两个组成部分：数字本身及其单位。例如，在 16px 中，数字是 16，单位是 px。数字可以没有单位，也可以有复杂的单位。

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

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

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

单位

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

Sass 会自动在兼容的单位之间进行转换，尽管它会为结果选择哪个单位取决于您使用的 Sass 的实现。如果您尝试组合不兼容的单位，例如 1in + 1em，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 个像素一秒，然后将其乘以过渡覆盖的像素数以获得它应该花费的时间。

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

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

精确

Sass 数字支持小数点后最多 10 位的精度。这意味着一些不同的事情：

• 只有小数点后的前十位数字会包含在生成的 CSS 中。
• 如果两个数字在小数点后的第 10 位相同，则类似==和

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com