SCSS "Если" условие с запятыми.Как это работает?

Question

Я обнаружил, что это в коде.Как я понимаю, $should-use-modal должен быть эфиром false или true в конце.

$should-use-modal: if(global-variable-exists(use-modal), $use-modal, false) !default;

Есть 3 части:

1. global-variable-exists(use-modal) - проверяет, является ли переменнаяuse-modal существует
2. $use-modal - это эфир false или true где-то еще в коде.
3. , и у нас есть только false.

Какая логика здесь?Если результат будет true, true, false, каков будет результат?или другая комбинация.Я не понимаю

Answer 1

Если условие (первый аргумент) выполнено, тогда используйте второй аргумент, если не третий.

Например:

if(true, blue, red) // Outputs "blue"
if(false, blue, red) // Outputs "red"

Встроенный if ()Функция позволяет переходить по условию и возвращает только один из двух возможных результатов.Может использоваться в любом контексте скрипта.Функция if оценивает только аргумент, соответствующий тому, который будет возвращен - это позволяет вам ссылаться на переменные, которые не могут быть определены, или проводить вычисления, которые в противном случае могли бы вызвать ошибку (например, деление на ноль).

В вашем случае:

$should-use-modal: if(global-variable-exists(use-modal), $use-modal, false) !default;

@if $should-use-modal {
  .modal {
    color: red;
  }
}

не будет выводить css, поскольку переменная $should-use-modal не определена, поэтому $should-use-modal имеет значение false (назначается в качестве третьего аргумента функции if).Но если вы определите переменную:

$use-modal: something;
$should-use-modal: if(global-variable-exists(use-modal), $use-modal, false) !default;

@if $should-use-modal {
  .modal {
    color: red;
  }
}

выведет следующее css, потому что переменная определена.

.modal {
  color: red;
}

Надеюсь, это поможет.

Подробнее оsass conditionals здесь .