Using CSS Level 4 max function in SASS for iPhone X safe-area Styling

If your want to use the CSS Level 4 max function in SASS you have to quote, and unquote the max function.

@supports(padding: unquote('max(0px)')) {
  padding-left: unquote('max(#{$susy-gutter-width}, env(safe-area-inset-left))');
  padding-right: unquote('max(#{$susy-gutter-width}, env(safe-area-inset-right))');
}

I believe the accepted answer should be corrected to

@supports(padding: unquote('max(0px)')) {
  padding-left: unquote('max(#{$susy-gutter-width}, env(safe-area-inset-left))');
  padding-right: unquote('max(#{$susy-gutter-width}, env(safe-area-inset-right))');
}

Otherwise max(0px) would get evaluated by SASS to 0px, which is supported everywhere and the rules will be applied to all browsers, even those not supporting CSS max().