在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) {
    // ...
}