SASS 中是不是有等效的 isset 或空合并运算符？

Posted 2023-02-21

【中文标题】SASS 中是不是有等效的 isset 或空合并运算符？

【英文标题】：Is there an equivalent of isset or a null coalescing operator in SASS?SASS 中是否有等效的 isset 或空合并运算符？

【发布时间】：2014-12-04 20:29:01

【问题描述】：

我只想设置一个尚未设置的变量。

所以...

在_layout.scss:

$page-width: 1100px;

但是，在我的 _module.scss 文件中，我不想依赖于 _layout.scss

我想做这样的事情：

$page-width = $page-width ?? 960px; 
// If $page-width exists, use it, otherwise set it to a default of 960px;

我想要一些更适合在 SASS 3.2 中使用的东西。我在这里找到了解决方案，否则：

global-variable-exists is triggering errors in Sass

【参考方案1】：

我相信您正在寻找variable defaults，SASS 支持它们。如果变量尚未在值末尾使用 ! 分配，则变量默认值允许您分配给变量。

在您的情况下，您可以在_layout.css 中使用它：

$page-width: 1100px;

然后在_module.scss你可以

$page-width: 960px !default;

这大致相当于说assign $page-width to 960px unless $page-width is already defined。

查看default variables 上的文档。

【讨论】：

这太棒了！它可以与默认的 mixin 参数一起使用来处理丢失或空参数。例如。 myMixin($offset: 10px) $offset: 20px !default; 因此，如果 $offset 没有传递给 mixin，那么它将获得 10px 的默认值，如果您发送一个空值，它将变为 20px :-)

【参考方案2】：

Mohamad 的答案是您的特定代码示例的最佳答案，但值得一提的是，Sass or 运算符有时可以用作?? 运算符的直接替代品：

$my-property: $uncertain-variable or $backup-value; 

我说“有时”，因为只有定义了您的 $uncertain-variable 才有意义。

这比某些语言更可靠——javascript——因为正如Sass docs 指出的那样：

有些语言认为错误的值不仅仅是false 和null。 Sass 不是其中一种语言！空字符串、空列表和数字0 在 Sass 中都是真实的。

我想是否要以这种方式使用or 是个人喜好问题。虽然它非常简洁，但您可以争辩说 @if 语句（或 if() 函数）更明确。

【参考方案3】：

是的。从 3.1.2 版开始，有一个 if 函数，它接受三个参数；要检查的条件，以及两个值，其中一个根据结果返回：

if(condition, value-returned-if-true, value-returned-if-false);

当您不想在代码的其他地方设置默认值时，这可能很有用。