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 likelist.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 %}