Использование env (safe-area-inset-top) в SCSS с функцией max () - PullRequest
Новая
       26

Использование env (safe-area-inset-top) в SCSS с функцией max ()

0 голосов
/ 02 января 2019

Я занимаюсь разработкой сайта, который я хочу правильно отображать на устройствах с надрезом (особенно на 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 я вижу, что он недействителен (см. Фото ниже)

PHOTO LINK

Есть ли способ исправить это или можно использовать инструкцию SCSS @if, чтобы определить, имеет ли родительский элемент заполнение> 0 и если нет, то добавьте к нему 1rem дополнения?

Моя проблема не в том, что упоминается здесь , это то, как я использую код, я также пытался поместить его в стандартный файл CSS без unquote, но это не такработает либо.

Ответы [ 2 ]

0 голосов
/ 04 августа 2019

В @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))');
}
0 голосов
/ 09 января 2019

Если я правильно прочитал ваш вопрос, вы ссылаетесь на функцию css max , а не на функцию max, предоставляемую Sass - также примером является CSS и, следовательно, для работы в SCSS нужен упомянутый хак Sass.

Первое, с чем вам нужно иметь дело, это реализация iOS 11.0 - 11.2 с использованием constant. Самый простой способ сделать это - назначить вставку безопасной области переменным CSS.

В следующем примере я создал значение по умолчанию 0px для всех переменных - но вы также можете использовать запасные значения при использовании переменных var(--some-var, 12px) (использует 12px, если --some-var не определен).

Вторая часть - ваш код, использующий переменные --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));
    }
}
...