sass-site/source/documentation/values/numbers.md
2023-06-22 15:11:18 -04:00

3.2 KiB

title introduction
Numbers Numbers in Sass have two components: the number itself, and its units. For example, in `16px` the number is `16` and the unit is `px`. Numbers can have no units, and they can have complex units. See [Units](#units) below for more details.

{% codeExample 'numbers', false %} @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") {% endcodeExample %}

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.

{% codeExample 'scientific-notation', false %} @debug 5.2e3; // 5200 @debug 6e-2; // 0.06

@debug 5.2e3 // 5200 @debug 6e-2 // 0.06 {% endcodeExample %}

{% headsUp %} Sass doesn't distinguish between whole numbers and decimals, so for example math.div(5, 2) returns 2.5 rather than 2. This is the same behavior as JavaScript, but different than many other programming languages. {% endheadsUp %}

{% render 'doc_snippets/number-units' %}

Precision

{% compatibility 'dart: true', 'libsass: false', 'ruby: "3.5.0"', 'feature: "10 Digit Default"' %} LibSass and older versions of Ruby Sass default to 5 digits of numeric precision, but can be configured to use a different number. It's recommended that users configure them for 10 digits for greater accuracy and forwards-compatibility. {% endcompatibility %}

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:

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

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

{% codeExample 'precision', false %} @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 {% endcodeExample %}

{% funFact %} Numbers are rounded to 10 digits of precision lazily when they're used in a place where precision is relevant. This means that math functions will work with the full number value internally to avoid accumulating extra rounding errors. {% endfunFact %}