Utilisation de plusieurs conditions (AND) dans l'instruction SASS IF

Question

En utilisant SASS, je voudrais avoir plusieurs conditions dans l'instruction IF

Ce que j'utilise en ce moment:

@function color-x ($alpha) {
    @if      $accent == red   {@return red($alpha)} 
    @else if $accent == green {@return green($alpha)} 
    @else if $accent == blue  {@return blue($alpha)}
}

Ma tentative naïve (échoué) d'utiliser plusieurs conditions:

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

Est-il possible d'avoir plusieurs conditions?

Answer 1

Dans la documentation de référence du langage Sass:

Opérations booléennes

SassScript prend en charge les opérateurs and, or et not pour les valeurs booléennes.

(lien)

Ainsi, une expression de déclaration if avec une condition composée ressemblerait à ceci:

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

De plus, les parenthèses peuvent être utilisées pour affecter l'ordre des opérations dans une expression plus compliquée:

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

Answer 2

Vous pouvez également faire:

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

Attention cependant:

1. Ce que vous essayez de faire n'est peut-être pas tout à fait évident.
2. Il renvoie un nombre ou null, pas un booléen.