号码

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

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

Sass编号支持与CSS编号相同的格式，包括科学计数法，该数字用e介于10的整数和10的幂之间的整数表示。由于浏览器对科学计数法的支持一直以来都是零星的，因此Sass始终将其编译为完全扩展的数字。

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

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

单位永久链接单位

Sass根据实际单位计算的工作方式为操纵单位提供强大的支持。当两个数字相乘时，其单位也将相乘。当一个数字除以另一个时，结果从第一个数字获取其分子单位，从第二个数字获取其分母单位。一个数字在分子和/或分母中可以具有任意数量的单位。

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug 5px / 2s; // 2.5px/s (read "pixels per second")
@debug 5px * 30deg / 2s / 24em; // 3.125px*deg/s*em
                                // (read "pixel-degrees per second-em")

$degrees-per-second: 20deg/1s;
@debug $degrees-per-second; // 20deg/s
@debug 1 / $degrees-per-second; // 0.05s/deg

@debug 4px * 6px  // 24px*px (read "square pixels")
@debug 5px / 2s  // 2.5px/s (read "pixels per second")
@debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
//                                 (read "pixel-degrees per second-em")

$degrees-per-second: 20deg/1s
@debug $degrees-per-second  // 20deg/s
@debug 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.

// CSS defines one inch as 96 pixels.
@debug 1in + 6px  // 102px or 1.0625in

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

与实际单位计算一样，如果分子包含与分母中的单位兼容的单位（如96px / 1in），它们将被抵消。这样可以轻松定义可用于单位之间转换的比率。在下面的示例中，我们将所需速度设置为每50像素1秒，然后将其乘以过渡覆盖的像素数，以获取所需的时间。

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

$transition-speed: 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;
}

精度永久链接精度

兼容性（默认为10位数字）：

Dart·Sass（Dart Sass）

✓

LibSass

✗

rubySass

从  3.5.0开始

▶

简单数字在小数点后最多支持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

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