danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-30 04:29:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update the calculation documentation to describe the new min/max (#578)

Browse Source 
See sass/sass#3142
See sass/sass#3150
This commit is contained in:
Natalie Weizenbaum 2021-09-20 23:58:48 +00:00 committed by GitHub
parent d0e401e3f9
commit b72c8094d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
source/documentation/values/calculations.html.md.erb
View File

@ -118,16 +118,21 @@ exactly where calculations are allowed and where they aren't.
## `min()` and `max()`
<% impl_status dart: ">=1.11.0 <1.40.0", libsass: false, ruby: false, feature: "Special function syntax" do %>
<% impl_status dart: ">=1.11.0 <1.42.0", libsass: false, ruby: false, feature: "Special function syntax" do %>
LibSass, Ruby Sass, and versions of Dart Sass prior to 1.11.0 *always* parse
`min()` and `max()` as Sass functions. To create a plain CSS `min()` or
`max()` call for those implementations, you can write something like
`unquote("min(#{$padding}, env(safe-area-inset-left))")` instead.
Versions of Dart Sass between 1.11.0 and 1.40.0 parse `min()` and `max()`
functions as [special functions] if they're valid plain CSS, but parses them
as Sass functions if they contain Sass features other than interpolation, like
variables or function calls.
Versions of Dart Sass between 1.11.0 and 1.40.0, and between 1.40.1 and 1.42.0
parse `min()` and `max()` functions as [special functions] if they're valid
plain CSS, but parse them as Sass functions if they contain Sass features
other than interpolation, like variables or function calls.
Dart Sass 1.41.0 parses `min()` and `max()` functions as calculations, but
doesn't allow unitless numbers to be combined with numbers with units. This
was backwards-incompatible with the global `min()` and `max()` functions, so
that behavior was reverted.
[special functions]: ../syntax/special-functions
<% end %>
@ -155,6 +160,15 @@ combined at build time, so `min(12px % 10, 10%)` will throw an error.
[modulo operator]: ../operators/numeric
<% heads_up do %>
Other calculations don't allow unitless numbers to be added to, subtracted
from, or compared to numbers with units. `min()` and `max()` are different,
though: for backwards-compatibility with the global Sass `min()` and `max()`
functions which allow unit/unitless mixing for historical reasons, these units
can be mixed as long as they're contained directly within a `min()` or `max()`
calculation.
<% end %>
<!-- TODO(nweiz): auto-generate this CSS once we're compiling with Dart Sass -->
<% example do %>