SASS @if and @else

SASS provides flow control mechanisms similar to JavaScript, allowing you to conditionally compile CSS code based on logical expressions. Using @if, @else, and @else if, you can create dynamic styles that change based on the values passed to your mixins or variables.

@if Directive

The @if directive works similarly to conditional statements in programming languages. If the expression inside the @if block evaluates to true, the block is compiled; otherwise, it’s skipped.

Syntax:

@if <conditional_expression> {
  // styles go here
}

Example 1: Using @if in a SASS Mixin

In this example, we create a mixin that formats a button, and we conditionally apply a border-radius if the button is meant to be round.

@mixin button-format( $round-button, $size ) {
    color: white;
    background-color: blue;
    width: $size;

    @if $round-button {
        height: $size;
        border-radius: $size / 2; 
    }
}

.mybutton{
    @include button-format(false, 100px);
}

.mybutton {
  color: white;
  background-color: blue;
  width: 100px;
}

Here, the @if condition checks if $round-button is true. Since we passed false, the conditional block is not executed, resulting in a square button.

Example 2: Applying @if for Round Buttons

If we change the argument to true, the button becomes round.

SASS File:

@mixin button-format( $round-button, $size ) {
    color: white;
    background-color: blue;
    width: $size;

    @if $round-button {
        height: $size;
        border-radius: $size / 2; 
    }
}


.mybutton{
    @include button-format(true, 100px);
}

.mybutton {
    color: white;
    background-color: blue;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

@else Directive

The @else block is executed when all the previous @if and @else if conditions evaluate to false. It’s a fallback option that runs when no other conditions are met.

Syntax:

@else {
  // styles go here
}

Example: Using @else for Conditional Theme

Here’s a mixin that applies different background colors based on the value of the $theme-decide variable. The @else block will be executed if the condition in the @if block is false.

SASS File:

@mixin theme ($theme-decide, $r, $g, $b) {
    // light background
    @if $theme-decide {
        background-color: rgba($r, $g, $b, 0.5);
    }
    // dark background
    @else {
        background-color: rgba($r, $g, $b, 1); // red color
    }

}

.myblock {
    @include theme(false, 255, 0, 0);
}

.myblock {
    background-color: red;
    // if true value is passed then rgba(255, 0, 0, 0.5);
}

In this case, since $theme-decide is false, the @else block is executed, resulting in a dark background (fully opaque red).

@else if Directive

The @else if directive allows for multiple conditional branches. It’s used when you need to check for multiple conditions sequentially. The first @else if condition that evaluates to true is executed, and the remaining blocks are skipped.

Syntax:

@else if <conditional_expression> { ... }

Example: Multiple Themes with @else if

In this example, we create a mixin that supports three different themes: light, medium-dark, and dark. We use @if, @else if, and @else to handle each theme based on the value of $theme-decide.

SASS File:

@mixin theme ($theme-decide, $r, $g, $b) {
    // light background
    @if $theme-decide == 1 {
        background-color: rgba($r, $g, $b, 0.5);
    }
    // medium-dark background
    @else if $theme-decide == 2 {
        background-color: rgba($r, $g, $b, 0.7);
    }
    // dark background
    @else {
        background-color: rgba($r, $g, $b, 1);
    }

}

.myblock {
    @include theme(2, 0, 255, 0);
}

.myblock {
  background-color: rgba(0, 255, 0, 0.7);
}