【问题标题】：What's the SASS equivalent of Javascript's "var x = y || z"?Javascript 的“var x = y || z”的 SASS 等价物是什么？
【发布时间】：2021-05-01 16:48:11
【问题描述】：

Javascript

变量 x = y || z（逻辑或运算符）

x = y if y is not falsy, otherwise z

什么是 Javascript 的“var x = y || z”的 SASS/SCSS 等价物？

【问题讨论】：

谷歌快速搜索 "sass assign default value to variable if undefined" 将我带到有关默认变量的官方文档：stackoverflow.com/questions/3525007/…
您对var x = y || z 的解释并不完全正确。 y 可能被定义为一个虚假值，在这种情况下，z 中的值将最终出现在 x 中。此外，如果未定义 y，您的代码将遇到引用错误。
@edo.n 好点。我会更新问题

标签： javascript sass

【解决方案1】：

$x = if(variable-exists($y), $y, $z);

Docs for variable-exists

【讨论】：

【解决方案2】：

!default 标志将跳过该变量（如果它已经存在）。

例如：

$var: foo;
$var: bar !default;

@debug $var; // foo

还有：

$var: bar !default;

@debug $var; // bar

更新：既然你澄清了你的问题，这可能是一个更好的方法：

@function return($x, $y) {
  @return if(($x != false), $x, $y);
}

@debug return("foo", "bar"); // "foo"
@debug return (false, "bar"); // "bar

【讨论】：

【解决方案3】：

双管道运算符

这种结构在 JavaScript 中被称为“双管道运算符”，对编写可读和干净的代码有很大帮助。

但遗憾的是，我认为 SASS 没有类似的东西。最接近它的方法是使用带有!default 标签或@if 和@else 流控制的默认值。

【讨论】：

是Javascript中的“逻辑或”运算符；它被写成双管，但它不是称为“双管”运算符。它被称为逻辑或运算符。