Menu
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?
418
If the condition proves true, the compiler will execute the if statement's code block. If the condition proves false, the compiler will move on to code outside and below the if statement's code block. An if statement is written with the @if rule, followed by the condition we want to evaluate and a code block.
The @if rule is written @if <expression> { ... } , and it controls whether or not its block gets evaluated (including emitting any styles as CSS). The expression usually returns either true or false —if the expression returns true , the block is evaluated, and if the expression returns false it's not.
The @if directive executes a set of statements a single time based on a Boolean expression. If, on the other hand, you want to execute the statements multiple times, but still control their execution based on a condition, you can use the @while directive.
Sass Mixins The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.
From the Sass language reference documentation:
Boolean Operations
SassScript supports
and,or, andnotoperators 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) { // ... } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
