Why @else and @else if branches in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple branching tool can save you hours of repetitive styling work!

The Scenario

Imagine you are styling a website and want different button colors based on the button type. You write separate CSS rules for each type manually, repeating similar code again and again.

The Problem

This manual way is slow and messy. If you want to add a new button type or change the logic, you must rewrite or copy-paste many rules. It's easy to make mistakes or forget to update some styles.

The Solution

@else and @else if branches let you write one clean block of code that checks conditions step-by-step. This way, you only write the shared structure once and handle different cases clearly and safely.

Before vs After

✗ Before

.button-primary { color: blue; }
.button-secondary { color: gray; }
.button-danger { color: red; }

✓ After

@if $type == 'primary' {
  color: blue;
} @else if $type == 'secondary' {
  color: gray;
} @else {
  color: red;
}

What It Enables

This lets you create flexible, easy-to-maintain styles that adapt automatically based on conditions, saving time and reducing errors.

Real Life Example

When building a theme with many button styles, you can use @else if branches to set colors, sizes, or fonts based on the button's purpose without repeating code.

Key Takeaways

Manual CSS for many conditions is repetitive and error-prone.

@else and @else if branches let you handle multiple conditions cleanly in one place.

This improves code clarity, maintenance, and flexibility in styling.