mirror of
https://github.com/danog/sass-site.git
synced 2024-12-02 17:38:26 +01:00
c1e5da4022
* 'main' of github.com:sass/sass-site: Document the floating-point numbers spec (#708) Cut a release for a new Dart Sass version Document constants in calculations (#707) Fix redirects for random-with-units and color-units (#706) Fix multiple typos (#703) Revert "Bump nokogiri from 1.12.5 to 1.13.10 (#699)" (#705) Bump nokogiri from 1.12.5 to 1.13.10 (#699) Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Document --fatal-deprecation (#702) Partially roll back #698 Document string.split() Bump versions of GitHub actions (#698) Fix broken markdown link in meta.function-exists (#697) Remove unmaintained links (#696) Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version
90 lines
3.1 KiB
Plaintext
90 lines
3.1 KiB
Plaintext
---
|
|
title: Numbers
|
|
introduction: >
|
|
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.
|
|
---
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@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")
|
|
<% end %>
|
|
|
|
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.
|
|
|
|
[scientific notation]: https://en.wikipedia.org/wiki/Scientific_notation
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug 5.2e3; // 5200
|
|
@debug 6e-2; // 0.06
|
|
===
|
|
@debug 5.2e3 // 5200
|
|
@debug 6e-2 // 0.06
|
|
<% end %>
|
|
|
|
<% heads_up do %>
|
|
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.
|
|
<% end %>
|
|
|
|
<%= partial 'documentation/snippets/number-units' %>
|
|
|
|
## Precision
|
|
|
|
<% impl_status dart: true, libsass: false, ruby: '3.5.0', feature: '10 Digit Default' do %>
|
|
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.
|
|
<% end %>
|
|
|
|
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.
|
|
|
|
[`==`]: ../operators/equality
|
|
[`>=`]: ../operators/relational
|
|
[`list.nth()`]: ../modules/list#nth
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@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
|
|
<% end %>
|
|
|
|
<% fun_fact do %>
|
|
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.
|
|
<% end %>
|