Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

sass
javascript
communitycreator

How to use the if-else condition in SASS

Theodore Kelechukwu Onyejiaku

In SASS(Syntactically Awesome Style Sheets) we can make use of the if-else statement, and even else-if, just as we can do in programming languages.

This ability of SASS to check for conditions allows us to write codes that are dynamic and not time-consuming.

Syntax


@if [condition] {
  /* css rule  */
}
@else if [condition] {
  /* css rule */
}
@else{
  /* css rule */
}

Where you might need this

You would definitely need this in a situation where a SASS mixin needs a parameter.

mixin parameter will be checked against a conditional statement followed by the CSSCascade Style Sheets rule to apply.

Code

The following example uses the SASS conditional statement to check the color of the .text class when a mixin with a parameter is applied to the class.

@mixin text-color($val){
    @if $val == light {
      color: #f8f9fa;
    }
    @else if $val == dark {
      color: #212529;
    }
    @else if $val == danger {
      color: red;
    }
    @else if $val == success {
      color: green
    }
    @else{
      color: black;
    }
  }

.text {
    font-size:16px;
    @include text-color(danger);
}

Explanation

In the code above, we created a .text class that takes a mixin called text-color.

The mixin takes a parameter which can be any of the text colors light, dark, danger, and success.

Then our if-else statement checks the color that was passed and gives the mixin the certain CSS rule to apply.

RELATED TAGS

sass
javascript
communitycreator

CONTRIBUTOR

Theodore Kelechukwu Onyejiaku
RELATED COURSES

View all Courses

Keep Exploring