数字

@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 数字相同的格式，包括 科学计数法，它是在数字及其 10 的幂之间用 e 编写的。由于浏览器对科学记数法的支持历来不稳定，因此 Sass 总是将其编译为完全扩展的数字。

¥Sass numbers support the same formats as CSS numbers, including scientific notation, which is written with an e between the number and its power of 10. Because support for scientific notation in browsers has historically been spotty, Sass always compiles it to fully expanded numbers.

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

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

UnitsUnits permalink

Sass has powerful support for manipulating units based on how real-world unit calculations work. When two numbers are multiplied, their units are multiplied as well. When one number is divided by another, the result takes its numerator units from the first number and its denominator units from the second. A number can have any number of units in the numerator and/or denominator.

@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

@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 will automatically convert between compatible units, although which unit it will choose for the result depends on which implementation of Sass you’re using. If you try to combine incompatible units, like 1in + 1em, Sass will throw an error.

// 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.

As in real-world unit calculations, if the numerator contains units that are compatible with units in the denominator (like math.div(96px, 1in)), they’ll cancel out. This makes it easy to define a ratio that you can use for converting between units. In the example below, we set the desired speed to one second per 50 pixels, and then multiply that by the number of pixels the transition covers to get the time it should take.

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

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

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

精确精确 permalink

¥Precision

兼容性 (10 Digit Default):

Dart Sass

✓

LibSass

✗

Ruby Sass

since 3.5.0

➤

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

¥Sass numbers are represented internally as 64-bit floating point values. They support up to 10 digits of precision after the decimal point when serialized to CSS and for the purposes of equality. This means a few different things:

• 生成的 CSS 中仅包含小数点后的前十位数字。

  ¥Only the first ten digits of a number after the decimal point will be included in the generated CSS.

• 如果两个数字小数点后第十位相同，则像 == 和 >= 这样的运算将认为两个数字相等。

  ¥Operations like == and >= will consider two numbers equivalent if they’re the same up to the tenth digit after the decimal point.

• 如果一个数字与整数的距离小于 0.0000000001，则对于需要整数参数的函数（如 list.nth()）而言，它被视为整数。

  ¥If a number is less than 0.0000000001 away from an integer, it’s considered to be an integer for the purposes of functions like list.nth() that require integer arguments.

@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