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); } 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, $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, $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); } 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 <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); } Compiled CSS file:.myblock { background-color: rgba(0, 255, 0, 0.7); }