Using multiple conditions (AND) in SASS IF statement

If StatementSass

If 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.

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

Solution 2 - If Statement

You can also do:

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

Beware though:

  1. It might not be quite obvious what you are trying to do.
  2. It returns a number or null, not a boolean.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Question500View Question on Stackoverflow
Solution 1 - If StatementRuss FerriView Answer on Stackoverflow
Solution 2 - If Statementuser1705630View Answer on Stackoverflow