在 SASS IF 语句中使用多个条件 (AND)答案

【问题标题】：Using multiple conditions (AND) in SASS IF statement在 SASS IF 语句中使用多个条件 (AND)
【发布时间】：2013-06-17 23:51:16
【问题描述】：

使用 SASS，我想在 IF 语句中有多个条件

我现在用的：

@function color-x ($alpha) {
    @if      $accent == red   {@return red($alpha)} 
    @else if $accent == green {@return green($alpha)} 
    @else if $accent == blue  {@return blue($alpha)}
}

我天真的（失败）尝试使用多个条件：

@function color-x ($alpha) {
    @if      $accent == red   && theme == light {@return red($alpha)} 
    @else if $accent == green && theme == light {@return green($alpha)} 
    @else if $accent == blue  && theme == light {@return blue($alpha)}
}

可以有多个条件吗？

【问题讨论】：

标签： if-statement sass

【解决方案1】：

来自 Sass 语言参考文档：

布尔运算

SassScript 支持布尔值的 and、or 和 not 运算符。

(link)

因此，带有复合条件的 if 语句表达式如下所示：

@if $var1 == value1 and $var2 == value2 {
    // ...
}

此外，圆括号可用于影响更复杂表达式中的运算顺序：

@if ($var1 == value1 and not ($var2 == value2)) or ($var3 == value3) {
    // ...
}

【讨论】：

如果其他人遇到这种情况，'and' 部分必须全部小写 -- 使用 AND（全部大写）不起作用。

【解决方案2】：

你也可以这样做：

@if index("foo" "bar", $value) { .. }

请注意：

您想要做什么可能不是很明显。
它返回一个数字或null，而不是布尔值。

【讨论】：