@if conditional logic in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code?

Given the Sass code below, what CSS will it produce?

$theme: dark;

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

SASS

$theme: dark;

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

A

body {
  background: transparent;
  color: inherit;
}

B

body {
  background: white;
  color: black;
}

C

body {
  background: black;
  color: white;
}

D

body {
  background: gray;
  color: black;
}

💡 Hint

Check the value of $theme and which @if branch matches it.

The variable $theme is set to 'dark', so the @else if branch for 'dark' runs, setting background to black and color to white.

🧠 Conceptual

intermediate

Which @if condition is true in this Sass snippet?

Consider this Sass code:

$size: 10px;

.container {
  @if $size > 5px {
    width: 100%;
  } @else {
    width: 50%;
  }
}

Which condition will Sass evaluate as true?

SASS

$size: 10px;

.container {
  @if $size > 5px {
    width: 100%;
  } @else {
    width: 50%;
  }
}

A $size > 5px is false, so width: 50% is applied.

B $size > 5px is true, so width: 100% is applied.

C $size > 5px causes a syntax error in Sass.

D Sass ignores the condition and applies both widths.

💡 Hint

Compare the numeric values with units in Sass.

Sass can compare units like px. Since 10px is greater than 5px, the first condition is true and width: 100% is applied.

❓ selector

advanced

What CSS selector is generated by this Sass code with @if?

Look at this Sass code:

$mode: dark;

.button {
  @if $mode == dark {
    &.dark-mode {
      background: black;
      color: white;
    }
  } @else {
    &.light-mode {
      background: white;
      color: black;
    }
  }
}

Which CSS selector will appear in the output?

SASS

$mode: dark;

.button {
  @if $mode == dark {
    &.dark-mode {
      background: black;
      color: white;
    }
  } @else {
    &.light-mode {
      background: white;
      color: black;
    }
  }
}

A .button.dark-mode { background: black; color: white; }

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

C .button.light-mode { background: white; color: black; }

D .dark-mode { background: black; color: white; }

💡 Hint

Check how the & symbol works with nested selectors in Sass.

The & symbol appends the nested class to the parent selector. Since $mode is 'dark', the .button.dark-mode selector is generated.

❓ layout

advanced

How does this Sass @if affect layout properties?

Given this Sass snippet:

$is-flex: true;

.container {
  @if $is-flex {
    display: flex;
    justify-content: center;
  } @else {
    display: block;
  }
}

What layout style will the container have?

SASS

$is-flex: true;

.container {
  @if $is-flex {
    display: flex;
    justify-content: center;
  } @else {
    display: block;
  }
}

A The container will use block layout and ignore justify-content.

B The container will cause a Sass error because $is-flex is not a string.

C The container will have no display property set.

D The container will use flex layout and center its children horizontally.

💡 Hint

Boolean variables can be used directly in @if conditions in Sass.

Since $is-flex is true, the @if branch sets display to flex and centers children horizontally with justify-content.

❓ accessibility

expert

Which Sass @if usage best supports accessible color contrast?

You want to ensure text color has enough contrast on different backgrounds. Which Sass code snippet correctly uses @if to set accessible colors?

$background: #333333;

.text {
  @if lightness($background) > 50% {
    color: black;
  } @else {
    color: white;
  }
}

SASS

$background: #333333;

.text {
  @if lightness($background) > 50% {
    color: black;
  } @else {
    color: white;
  }
}

A Sets text color to white on dark backgrounds and black on light backgrounds, ensuring contrast.

B Always sets text color to black regardless of background brightness.

C Uses an invalid function lightness() causing a Sass error.

D Sets text color to white on light backgrounds and black on dark backgrounds, reducing contrast.

💡 Hint

The lightness() function returns brightness; higher means lighter color.

The code checks if background is light (lightness > 50%) and sets text color to black for readability; otherwise white for dark backgrounds.

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