Why @if conditional logic in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple condition can save you hours of tedious CSS rewriting!

The Scenario

Imagine you want to style a button differently depending on whether it is primary or secondary. You write separate CSS rules for each case manually.

The Problem

If you want to change the style for many buttons or add new conditions, you must copy and edit many CSS blocks. This is slow, repetitive, and easy to make mistakes.

The Solution

The @if conditional logic in Sass lets you write one style block that changes automatically based on conditions. This keeps your code clean and easy to update.

Before vs After

✗ Before

button-primary { background: blue; color: white; }
button-secondary { background: gray; color: black; }

✓ After

@if $type == 'primary' {
  background: blue;
  color: white;
} @else {
  background: gray;
  color: black;
}

What It Enables

You can create flexible styles that adapt automatically, saving time and reducing errors.

Real Life Example

Styling a website's theme where buttons, alerts, or cards change colors based on user preferences or states.

Key Takeaways

Manual CSS for different cases is repetitive and error-prone.

@if lets you write conditional styles in one place.

This makes your styles easier to maintain and update.

Practice

1. What does the @if directive do in Sass?

easy

A. It defines a variable.

B. It loops through a list of items.

C. It imports other Sass files.

D. It applies styles only if a condition is true.

Solution

1. Step 1: Understand the purpose of @if

   The @if directive checks a condition and applies styles only when that condition is true.

2. Step 2: Compare with other options

   Looping is done with @for or @each, importing with @import, and variables are defined with $.

3. Final Answer:

   It applies styles only if a condition is true. -> Option D

4. Quick Check:

   @if = conditional style application [OK]

Hint: Remember: @if controls styles by conditions [OK]

Common Mistakes:

• Confusing @if with loops or imports
• Thinking @if defines variables
• Assuming @if always runs styles

2. Which of the following is the correct syntax for using @if in Sass?

easy

A. @if $color == red { color: red; }

B. @if ($color = red) { color: red; }

C. @if $color === red { color: red; }

D. @if $color => red { color: red; }

Solution

1. Step 1: Check the correct comparison operator

   Sass uses == to compare values in @if conditions, not =, ===, or =>.

2. Step 2: Verify syntax structure

   The correct syntax is @if $variable == value { ... } without parentheses around the condition.

3. Final Answer:

   @if $color == red { color: red; } -> Option A

4. Quick Check:

   Use == for comparison in @if [OK]

Hint: Use double equals (==) for conditions in @if [OK]

Common Mistakes:

• Using single equals (=) instead of double (==)
• Adding parentheses around condition
• Using JavaScript style === or =>

3. What will be the output CSS of this Sass code?

$theme: dark;

body {
  @if $theme == light {
    background: white;
    color: black;
  } @else if $theme == dark {
    background: black;
    color: white;
  } @else {
    background: gray;
    color: black;
  }
}

medium

A. body { background: black; color: white; }

B. body { background: white; color: black; }

C. body { background: gray; color: black; }

D. No output due to syntax error

Solution

1. Step 1: Check the value of $theme

   The variable $theme is set to dark.

2. Step 2: Evaluate the @if conditions

   The first condition $theme == light is false, so it skips to @else if $theme == dark, which is true. So it applies background: black; and color: white;.

3. Final Answer:

   body { background: black; color: white; } -> Option A

4. Quick Check:

   $theme = dark triggers @else if dark block [OK]

Hint: Match variable value to @if conditions carefully [OK]

Common Mistakes:

• Choosing first @if block without checking variable
• Ignoring @else if and @else blocks
• Assuming syntax error without checking carefully

4. Identify the error in this Sass code:

$size: 10px;

.box {
  @if $size > 5 {
    width: $size;
  } @else if $size < 5 {
    width: 5px;
  }
}

medium

A. Missing @else block for equal size case.

B. Units like px cannot be compared directly in @if.

C. Comparison operators like > and < are not allowed in @if.

D. Variable $size should be declared inside the block.

Solution

1. Step 1: Understand unit comparison in Sass

   Sass does not allow direct comparison of values with units like 10px > 5 in @if conditions.

2. Step 2: Check other options

   Comparison operators are allowed, @else block is optional, and variables can be declared outside blocks.

3. Final Answer:

   Units like px cannot be compared directly in @if. -> Option B

4. Quick Check:

   Cannot compare px units directly in @if [OK]

Hint: Avoid comparing units directly; use numbers or functions [OK]

Common Mistakes:

• Thinking > and < are invalid operators
• Assuming @else is mandatory
• Declaring variables only inside blocks

5. You want to set a button's background color based on a variable $status that can be 'success', 'warning', or 'error'. Which Sass code correctly uses @if conditional logic to apply green for success, yellow for warning, and red for error, with a default gray if none match?

hard

A. @if $status = success {
background: green;
} @else if $status == warning {
background: yellow;
} @else if $status == error {
background: red;
} @else {
background: gray;
}

B. @if $status = 'success' {
background: green;
} @else if $status = 'warning' {
background: yellow;
} @else if $status = 'error' {
background: red;
} @else {
background: gray;
}

C. @if $status == 'success' {
background: green;
} @else if $status == 'warning' {
background: yellow;
} @else if $status == 'error' {
background: red;
} @else {
background: gray;
}

D. @if $status === 'success' {
background: green;
} @else if $status === 'warning' {
background: yellow;
} @else if $status === 'error' {
background: red;
} @else {
background: gray;
}

Solution

1. Step 1: Check string comparison syntax

   In Sass, string values must be quoted and compared with ==, not = or ===.

2. Step 2: Verify the use of quotes around strings

   Options A and B miss quotes or use wrong operators; @if $status === 'success' { background: green; } @else if $status === 'warning' { background: yellow; } @else if $status === 'error' { background: red; } @else { background: gray; } uses === which is invalid in Sass.

3. Final Answer:

   @if $status == 'success' { background: green; } @else if $status == 'warning' { background: yellow; } @else if $status == 'error' { background: red; } @else { background: gray; } -> Option C

4. Quick Check:

   Use == and quotes for string comparison in @if [OK]

Hint: Compare strings with == and quotes in @if [OK]

Common Mistakes:

• Using single equals (=) instead of double (==)
• Omitting quotes around strings
• Using JavaScript style === operator