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

Question

I want to use the CSS Level 4 function 'max' in SASS for safe-area styling like documented here. But this function conflicts with the SASS max function. Is there a way to use the CSS Level 4 max function in SASS?

Answer 1

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))');
}

Answer 2

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().