Sass @if and @else

How @if Works

@if evaluates a condition and runs its block only if that condition is true. You can chain additional conditions with @else if, and provide a fallback with a plain @else, exactly like conditionals in most programming languages.

@mixin alert($type) {
  @if $type == success {
    background: #dcfce7;
    color: #166534;
  } @else if $type == danger {
    background: #fee2e2;
    color: #991b1b;
  } @else {
    background: #f1f5f9;
    color: #1f2937;
  }
}

.alert-success {
  @include alert(success);
}

The @else if/@else chain works exactly like a JavaScript or Python if/elif/else chain, only the matching branch's declarations are output.

@if / @else Syntax

@if condition {
  // block A
} @else if condition2 {
  // block B
} @else {
  // block C
}

• @if requires a boolean-evaluable expression, which can use comparison and logical operators.
• @else if chains additional conditions, checked in order, top to bottom.
• A trailing @else (no condition) acts as the catch-all fallback.
• Only false and null are falsy in Sass; every other value, including 0 and empty strings, is truthy.

@if / @else Cheatsheet

Truthy/falsy behavior and common conditional patterns.

Conditional Declarations Inside Mixins

A very common real-world pattern: a mixin accepts a boolean flag and only outputs a certain declaration when that flag is true, keeping optional behavior configurable through a single parameter.

@mixin card($shadow: true) {
  padding: 1rem;
  border-radius: 8px;

  @if $shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

Nested and Combined Conditionals

@if blocks can nest, and conditions can combine multiple checks with and/or for more precise branching logic than a single flat condition would allow.

@mixin button($size: md, $variant: primary) {
  @if $size == lg and $variant == primary {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  } @else if $size == lg {
    padding: 1rem 2rem;
  } @else {
    padding: 0.5rem 1rem;
  }
}

Truthy and Falsy Gotchas

Only false and null are falsy in Sass. This is a common surprise for developers coming from JavaScript, where 0 and "" are also falsy, in Sass, both of those values are truthy and will pass an @if check.

$count: 0;

@if $count {
  // this DOES run, because 0 is truthy in Sass
}

@if $count != 0 {
  // this is the correct way to check for a zero value
}

Common Mistakes

• Assuming 0 or an empty string is falsy, as in JavaScript; both are truthy in Sass.
• Writing an @else if chain in the wrong order, so an earlier, broader condition unintentionally shadows a later, more specific one.
• Forgetting the required space before @else and after the closing brace on the same line as required Sass formatting (} @else {).
• Overusing deeply nested @if chains instead of simplifying the condition or splitting the mixin into smaller pieces.

Key Takeaways

• @if/@else if/@else provide conditional branching, evaluated entirely at compile time.
• Only false and null are falsy; every other value, including 0, is truthy.
• Conditions can use comparison operators (==, >, <) and logical operators (and, or, not).
• Conditional mixins are a common, practical pattern for toggling optional declarations.