if-statement - 在 SASS IF 语句中使用多个条件 (AND)

Question

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

是否可以有多个条件？

Answer 1

来自 Sass 语言参考文档：

布尔运算

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

（关联）

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

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

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

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

Answer 2

你也可以这样做：

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

不过要小心：

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