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

Published on 2019-04-03 by Brad Bice

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.

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