If statement 在SASS IF语句中使用多个条件（AND）

使用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)}
}

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

@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)}
}

---

是否可能有多个条件？

来自Sass语言参考文档：

布尔运算

SassScript支持布尔值的

和

、

或

、和

非

运算符

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

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

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

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

您还可以执行以下操作：

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

但要注意：

你想做什么可能不太明显

它返回一个数字或

null

，而不是布尔值

---

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