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

有没有可能出现多种情况？

63246 次浏览

小开

最佳答案

From the Sass language reference documentation:

Boolean Operations

SassScript supports and, or, and not operators for boolean values.

(link)

So an if statement expression with a compound condition would look like this:

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

Further, parentheses can be used to affect the order of operations in a more complicated expression:

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

小开

You can also do:

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

Beware though:

It might not be quite obvious what you are trying to do.
It returns a number or null, not a boolean.