在 SCSS 中使用 env(safe-area-inset-top) 和 max() 函数

Question

我正在开发一个网站，我希望在有缺口的设备上正确显示（尤其是我拥有的 iPhone X）。在此页面中，给出了以下代码示例：

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

但是，当我有这个设置时，在 Chrome 中我可以看到它无效（见下面链接的照片）

有没有办法纠正这个问题，或者可以使用 SCSS@if语句来检测父元素是否具有填充 > 0，如果没有向其添加1rem填充？

我的问题不是这里提到的问题，这就是我使用代码的方式，我也尝试将其放入标准 CSS 文件中，unquote但它也不起作用。

Answer 1

如果我没看错你的问题，你指的是css max 函数，而不是 Sass 提供的 max 函数——这个例子也是 CSS，因此需要提到的 Sass 'hack' 才能在 SCSS 中工作。

您需要处理的第一件事是使用constant. 最简单的方法是将 safe-area-inset 分配给 CSS 变量。

在下面的示例中，我为所有变量创建了一个默认值 0px - 但您也可以在使用变量时使用回退值var(--some-var, 12px)（如果 --some-var 未定义，则使用 12px）。

第二部分是使用 --safe-area-inset 变量的代码。

我希望这是有道理的:-)

:root {
    /* ------------------------------------------------------------------- 
        Assign the default/constant/env values to CSS variables
    */
    --safe-area-inset-top   : 0px;
    --safe-area-inset-right : 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left  : 0px;  

    @supports (top: constant(safe-area-inset-top)){
        --safe-area-inset-top   : constant(safe-area-inset-top);
        --safe-area-inset-right : constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left  : constant(safe-area-inset-left);          
    }

    @supports (top: env(safe-area-inset-top)){
        --safe-area-inset-top   : env(safe-area-inset-top);
        --safe-area-inset-right : env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left  : env(safe-area-inset-left);            
    }          
}


@supports(padding: Max(0px)) {
    .post {
        /* -------------------------------------------------------------------   
           Use the CSS variables in the max function   
        */
        padding-left:  Max(12px, var(--safe-area-inset-left));
        padding-right: Max(12px, var(--safe-area-inset-right));
    }
}

Answer 2

您也需要在@supports 中取消引用 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))');
}