Getting CSS Level 4 max() functions to work with Sass variables

How to get these functions to work with normal Sass variables.

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

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

Also related to Checking for CSS environment-variable support