sass - SCSS "If"条件带逗号。它是如何工作的？

Question

我发现这是在代码中。据我了解 $should-use-modal 最后应该是 ether 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"

The built-in if() function allows you to branch on a condition and returns only one of two possible outcomes. It can be used in any script context. The if function only evaluates the argument corresponding to the one that it will return -- this allows you to refer to variables that may not be defined or to have calculations that would otherwise cause an error (E.g. divide by zero).

就您而言:

$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 条件的更多信息 here .