SASS @if, @else and @else if At-rule

SASS also provides support for flow control by providing @if, @else and @else if at-rules which can be used in SASS to write complex code by implementing conditions in your stylesheets.

While writing SASS functions or SASS mixins we can define different style rules depending upon the values of the arguments provided when a mixin is included or a function is called. This can be done using the SASS @if and @else at-rules, making it easy to write more dynamic style rules.

SASS @if At-rule

The SASS @if at-rule can be used to control the execution of a style block based on a condition.

SASS @if: Syntax

The syntax for using the @if at-rule is quite simple,

@if <expression> { 

    /* statements */ 

}

Here, if the expression evaluates to true, then the block associated with the @if at-rule is evaluated, compiling into CSS style rules, and if the expression evaluates to false, then the block is skipped.

SASS @if: Example

Let's take an example to see @if at-rule in action.

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

This will be compiled into following CSS:

.blue-border {
  border-color: blue;
}

.red-border-round {
  border-color: red;
  border-radius: 5px;
}

SASS @else At-rule

SASS @else at-rule is used with the @if at-rule to provide an alternative block which is executed if the @if expression returns false. The @else at-rule is optional and its not mandatory to use it along with @if at-rule.

SASS @else: Syntax

The syntax for using the @else at-rule is quite simple,

@else { 

    /* statements */ 

}

NOTE: The SASS @else at-rule cannot be used without an @if at-rule. It should always follow the @if at-rule.

SASS @else: Example

Let's take an example to see @else at-rule in action.

$light-background: #fefefe;
$light-text: #000000;
$dark-background: #000000;
$dark-text: #fefefe;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
}

This will be compiled into following CSS:

.banner {
  background-color: #fefefe;
  color: #000000;
}

SASS @else if At-rule

To define multiple conditional flows, we can use the @else if at-rule along with the @if at-rule. The SASS @else if at-rule can be used between @if at-rule and @else at-rule to include multiple conditional style blocks.

SASS @else if: Syntax

The syntax for @else if at-rule is similar to that of @if at-rule:

@else if <expression> { 

    /* statements */ 

}

Just like @if at-rule, the @else if at-rule also takes in an expression as a condition, and if the expression of @if at-rule evaluates to false, and the @else if expression evaluates to true, the @else if style block is compiled.

Also, the @else if should always be used with the @if at-rule, just like the @else at-rule.

SASS @else if: Example

Let's take an example to see @else if at-rule in action.

@mixin text-effect($val) 
{
   @if $val == danger 
      {
         color: red;
      }
   @else if $val == alert 
      {
         color: yellow;
      }
   @else if $val == success 
      {
         color: green;
      }
   @else 
      {
         color: black;
      }
}

In the example above we have used $val as a parameter to determine whether the color should be for danger, warning, etc.

Let us take one more example below, here we used a SASS mixin for the different border styles:

$light: 1px solid black;
$medium: 3px solid black;
$heavy: 6px solid black;
$none: none;

@mixin border-stroke($val) 
{
  @if $val == light 
  {
     border: $light;
  }
  @else if $val == medium 
  {
     border: $medium;
  }
  @else if $val == heavy 
  {
     border: $heavy;
  }
  @else 
  { 
     border: $none;
  }
}

#box 
{
  width: 150px;
  height: 150px;
  background-color: red;
  /* calling the mixin */
  @include border-stroke(heavy);
}

The above SASS code will be compiled to the following CSS code:

#box 
{
  width: 150px;
  height: 150px;
  background-color: red;
  border: 6px solid black;
}

So in this tutorial we learned how to implement flow control in SASS using the @if, @else and @else if at-rule in your stylesheet to make you stylesheet more dynamic.