Sass @if and @else

Posted in Sass Tutorial

Updated on Sep 03, 2024

By Mari Selvan

👁️ 27 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Sass provides control flow directives to help manage conditional logic in your stylesheets. The @if and @else directives are essential for applying styles based on specific conditions.

This guide will focus on how to use these directives to conditionally apply styles based on Boolean expressions.

💡 Syntax

@if

The @if directive is used to execute a block of code only if a given condition evaluates to true.

Syntax

Copied

@if condition {
  // styles to apply if condition is true
}

@else

The @else directive follows an @if block and provides an alternative set of styles to apply if the @if condition is false.

Syntax

Copied

@if condition {
  // styles to apply if condition is true
} @else {
  // styles to apply if condition is false
}

🔢 Parameters

condition: A Boolean expression or a value that evaluates to true or false.

📝 Example Usage

Let’s explore some practical examples of how the @if and @else directive can be used in your Sass stylesheets.

📜 Example 1: Basic Usage

example.scss

Copied

$theme: dark;

.header {
  @if $theme == dark {
    background-color: #333;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #000;
  }
}

In this example, if the $theme variable is set to dark, the .header will have a dark background and white text. Otherwise, it will have a light background and black text.

📜 Example 2: Nested Conditions

example.scss

Copied

$layout: grid;

.container {
  @if $layout == grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  } @else {
    display: block;
  }
}

Here, if the $layout variable is grid, the container will use CSS Grid layout. If it's anything else, it will default to a block display.

📜 Example 3: Combining @if and @else

example.scss

Copied

$device: mobile;

.button {
  @if $device == mobile {
    padding: 10px;
    font-size: 14px;
  } @else {
    padding: 15px;
    font-size: 18px;
  }
}

This example applies different padding and font size based on the device type, assuming $device can be either mobile or other values.

⚠️ Common Pitfalls

Forgetting the Braces: Make sure to include braces {} around your style blocks. Without them, the @if and @else directives will not work as expected.
Misusing @else Without @if: The @else directive must follow an @if directive. Using @else without a preceding @if will result in a syntax error.
Complex Conditions: Be careful with complex conditions. Ensure that the expressions inside @if are properly evaluated. Complex or nested conditions can become difficult to manage.
Typographical Errors: Ensure all variables and conditions are correctly spelled and defined. Typographical errors in variable names or conditions can lead to unexpected results or errors.

🎉 Conclusion

The @if and @else directives in Sass offer a straightforward way to include conditional logic in your stylesheets. By understanding and correctly implementing these directives, you can create more dynamic and adaptable styles. Just be mindful of common pitfalls to ensure your stylesheets function as intended.

Experiment with different conditions and scenarios to leverage the full power of Sass's control flow capabilities.