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运算符以获取布尔值。

(link)

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

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

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

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

Answer 2

你也可以这样做：

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

请注意：

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

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

2 个答案: