sass-site/source/documentation/values/numbers.html.md.erb

89 lines
2.9 KiB
Plaintext
Raw Normal View History

2018-09-01 22:35:20 +02:00
---
title: Numbers
2019-03-05 01:24:31 +01:00
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.
2018-09-01 22:35:20 +02:00
---
<% 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")
2018-09-01 22:35:20 +02:00
<% 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
2018-09-01 22:35:20 +02:00
<% end %>
<% heads_up do %>
Sass doesn't distinguish between whole numbers and decimals, so for example `5
/ 2` returns `2.5` rather than `2`. This is the same behavior as JavaScript,
but different than many other programming languages.
2018-09-01 22:35:20 +02:00
<% end %>
<%= partial 'documentation/snippets/number-units' %>
## Precision
<% impl_status dart: true, libsass: false, ruby: '3.5.0' 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.
2018-09-01 22:35:20 +02:00
<% end %>
Sass numbers support up to 10 digits of precision after the decimal point. 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 [`nth()`][] that require
integer arguments.
[`==`]: ../operators/equality
[`>=`]: ../operators/relational
2018-10-24 02:45:14 +02:00
[`nth()`]: ../functions/list#nth
2018-09-01 22:35:20 +02:00
<% 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
2018-09-01 22:35:20 +02:00
<% 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.
2018-09-01 22:35:20 +02:00
<% end %>