Question

我发现这是在代码中。据我所知，$should-use-modal最后应为false或true。

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

共有3个部分：

global-variable-exists(use-modal) - 检查变量use-modal是否存在
$use-modal在代码中的其他位置是以太false或true。
我们只有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（如果函数参数指定为第三个）。但是如果你定义变量：

$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的更多信息。

SCSS“If”条件用逗号表示。它是如何工作的？

1 个答案: