Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Flow Control

Sass @if and @else

Posted in Sass Tutorial
Updated on Sep 03, 2024
By Mari Selvan
πŸ‘οΈ 17 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass @if and @else

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
Copy To Clipboard
@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
Copy To Clipboard
@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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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

  1. Forgetting the Braces: Make sure to include braces {} around your style blocks. Without them, the @if and @else directives will not work as expected.
  2. Misusing @else Without @if: The @else directive must follow an @if directive. Using @else without a preceding @if will result in a syntax error.
  3. 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.
  4. 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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy