Using multiple conditions (AND) in SASS IF statement
If StatementSassIf Statement Problem Overview
Using SASS, I would like to have multiple condition in IF statement
What I use right now :
@function color-x ($alpha) {
@if $accent == red {@return red($alpha)}
@else if $accent == green {@return green($alpha)}
@else if $accent == blue {@return blue($alpha)}
}
My naive (failed) attempt to use multiple 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)}
}
Is it possible to have multiple conditions?
If Statement Solutions
Solution 1 - If Statement
From the Sass language reference documentation:
> Boolean Operations
>
> SassScript supports and
, or
, and not
operators for boolean values.
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) {
// ...
}
Solution 2 - If Statement
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.