SASS @if and @else (original) (raw)

Last Updated : 7 Oct, 2024

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 {
// 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,round-button, 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); }

**Compiled CSS file

.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,round-button, 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); }

**Compiled CSS file

.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,r, r,g, $b) { // light background @if $theme-decide { background-color: rgba($r, g,g, g,b, 0.5); } // dark background @else { background-color: rgba($r, g,g, g,b, 1); // red color }

}

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

**Compiled CSS file:

.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 { ... }

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,r, r,g, $b) { // light background @if $theme-decide == 1 { background-color: rgba($r, g,g, g,b, 0.5); } // medium-dark background @else if $theme-decide == 2 { background-color: rgba($r, g,g, g,b, 0.7); } // dark background @else { background-color: rgba($r, g,g, g,b, 1); }

}

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

**Compiled CSS file:

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