在SASS中为iPhone X安全区域样式使用CSS Level 4 max函数

Question

我想在SASS中使用CSS Level 4函数'max'进行安全区域样式设计，如此处所述。但是此功能与SASS max功能冲突。有没有办法在SASS中使用CSS Level 4 max函数？

Answer 1

如果要在SASS中使用CSS Level 4 max函数，则必须引用并取消对max函数的引用。

@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

我认为接受的答案应该更正为

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

否则max(0px)将被 SASS 评估为 0px，这在所有地方都受支持，并且规则将应用于所有浏览器，甚至是那些不支持 CSS max() 的浏览器。