Using multiple conditions (AND) in SASS IF statement
From the Sass language reference documentation:
Boolean Operations
SassScript supports
and
,or
, andnot
operators for boolean values.
(link)
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) {
// ...
}
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.