Используя несколько условий (AND) в инструкции SASS IF

Используя 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)}
}

Возможно ли иметь несколько условий?

Ответ 1

Из справочной документации по языку Sass:

Логические операции

SassScript поддерживает операторы and, or и not для булевых значений.

(ссылка)

Итак выражение выражения if с составным условием будет выглядеть так:

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

Кроме того, скобки могут использоваться для изменения порядка операций в более сложном выражении:

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

Ответ 2

Вы также можете сделать:

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

Остерегайтесь:

Возможно, не совсем очевидно, что вы пытаетесь сделать.
Он возвращает число или null, а не логическое.