在 SASS IF 语句中使用多个条件 (AND) [英] Using multiple conditions (AND) in SASS IF statement

问题描述

使用SASS，我想在IF语句中有多个条件

Using SASS, I would like to have multiple condition in IF statement

我现在使用的:

@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 语言参考文档:

From the Sass language reference documentation:

布尔运算

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

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

(链接)

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

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

这篇关于在 SASS IF 语句中使用多个条件 (AND)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！