数字

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

Playground

SCSS Syntax

@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (读作 "平方像素")
Playground

Sass Syntax

@debug 100  // 100
@debug 0.8  // 0.8
@debug 16px  // 16px
@debug 5px * 2px  // 10px*px (读作 "平方像素")

Sass 数字支持与 CSS 数字相同的格式，包括科学记数法，它使用 e 写在数字和其 10 的幂之间。由于浏览器对科学记数法的支持历史上一直不稳定，Sass 总是将其编译为完全展开的数字。

Playground

SCSS Syntax

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

Sass Syntax

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

⚠️ Heads up!

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

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.

Playground

SCSS Syntax

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

Sass Syntax

@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

⚠️ Heads up!

Because CSS doesn’t support complex units like square pixels, using a number with complex units as a property value will produce an error. This is a feature in disguise, though; if you aren’t ending up with the right unit, it usually means that something’s wrong with your calculations! And remember, you can always use the @debug rule to check out the units of any variable or expression.

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.

Playground

SCSS Syntax

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

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

Sass Syntax

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

Playground

SCSS Syntax

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

Sass Syntax

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

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

⚠️ Heads up!

If your arithmetic gives you the wrong unit, you probably need to check your math. You may be leaving off units for a quantity that should have them! Staying unit-clean allows Sass to give you helpful errors when something isn’t right.

You should especially avoid using interpolation like #{$number}px. This doesn’t actually create a number! It creates an unquoted string that looks like a number, but won’t work with any number operations or functions. Try to make your math unit-clean so that $number already has the unit px, or write $number * 1px.

⚠️ Heads up!

Percentages in Sass work just like every other unit. They are not interchangeable with decimals, because in CSS decimals and percentages mean different things. For example, 50% is a number with % as its unit, and Sass considers it different than the number 0.5.

You can convert between decimals and percentages using unit arithmetic. math.div($percentage, 100%) will return the corresponding decimal, and $decimal * 100% will return the corresponding percentage. You can also use the math.percentage() function as a more explicit way of writing $decimal * 100%.

精度精度 permalink

Compatibility (10 Digit Default):
Dart Sass
✓
LibSass
✗
Ruby Sass
since 3.5.0

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

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

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

  • 像 == 和 >= 这样的操作将认为两个数字相等，如果它们在小数点后第十位是相同的。

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

Playground

SCSS Syntax

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

Sass Syntax

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

💡 Fun fact:

数字在需要精度的地方懒惰地四舍五入到 10 位精度。这意味着数学函数将在内部使用完整的数字值，以避免累积额外的舍入误差。