@else and @else if branches in SASS - Mini Project: Build & Apply

Using @else and @else if branches in Sass

📖 Scenario: You are creating a simple Sass stylesheet for a website that changes the background color of a button based on its type. The button can be primary, secondary, or danger. If the type is not one of these, it should have a default background color.

🎯 Goal: Build a Sass code snippet that uses @if, @else if, and @else branches to set the background color of a button based on its $type variable.

📋 What You'll Learn

Create a Sass variable called $type with the value 'primary'.

Create a variable called $primary-color with the value #007bff.

Create a variable called $secondary-color with the value #6c757d.

Create a variable called $danger-color with the value #dc3545.

Use @if, @else if, and @else to set a variable $bg-color based on $type.

Write a CSS rule for .button that sets background-color to $bg-color.

💡 Why This Matters

🌍 Real World

Buttons on websites often change color based on their purpose, like primary actions or warnings. Using Sass conditionals helps manage these styles cleanly.

💼 Career

Knowing how to use @if, @else if, and @else in Sass is important for frontend developers to write maintainable and flexible stylesheets.

1

Set up the initial variables

Create a Sass variable called $type and set it to the string 'primary'. Then create three color variables: $primary-color set to #007bff, $secondary-color set to #6c757d, and $danger-color set to #dc3545.

SASS

# Create $type and color variables
# Your code here

Hint

Remember to use $variable-name: value; syntax to create variables in Sass.

2

Add a variable for background color

Create a new Sass variable called $bg-color and set it initially to null.

SASS

$type: 'primary';
$primary-color: #007bff;
$secondary-color: #6c757d;
$danger-color: #dc3545;

// Create $bg-color variable and set to null
# Your code here

Hint

Use $bg-color: null; to declare the variable without a color yet.

3

Use @if, @else if, and @else to set $bg-color

Write an @if block that checks if $type is 'primary' and sets $bg-color to $primary-color. Then add an @else if branch to check if $type is 'secondary' and set $bg-color to $secondary-color. Add another @else if branch to check if $type is 'danger' and set $bg-color to $danger-color. Finally, add an @else branch that sets $bg-color to #cccccc as a default color.

SASS

$type: 'primary';
$primary-color: #007bff;
$secondary-color: #6c757d;
$danger-color: #dc3545;

$bg-color: null;

// Use @if, @else if, and @else to set $bg-color based on $type
# Your code here

Hint

Use @if and @else if with == to compare strings in Sass.

4

Create the .button rule with background color

Write a CSS rule for the class .button that sets the background-color property to the Sass variable $bg-color.

SASS

$type: 'primary';
$primary-color: #007bff;
$secondary-color: #6c757d;
$danger-color: #dc3545;

$bg-color: null;

@if $type == 'primary' {
  $bg-color: $primary-color;
} @else if $type == 'secondary' {
  $bg-color: $secondary-color;
} @else if $type == 'danger' {
  $bg-color: $danger-color;
} @else {
  $bg-color: #cccccc;
}

// Add .button CSS rule with background-color set to $bg-color
# Your code here

Hint

Use .button { background-color: $bg-color; } to apply the color.

Practice

1. What does the @else if branch do in Sass?

easy

A. Runs only if all previous conditions were true

B. Repeats the first @if condition

C. Ends the conditional statement immediately

D. Checks another condition if the previous @if was false

Solution

1. Step 1: Understand @if and @else if roles

   The @if checks the first condition. If false, @else if checks another condition.

2. Step 2: Identify @else if behavior

   @else if only runs if the previous @if or @else if was false, allowing multiple checks.

3. Final Answer:

   Checks another condition if the previous @if was false -> Option D

4. Quick Check:

   @else if = checks next condition [OK]

Hint: Remember: @else if checks next condition only if previous fails [OK]

Common Mistakes:

• Thinking @else if runs when previous is true
• Confusing @else if with @else
• Believing @else if ends the condition chain

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

easy

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

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

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

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

Solution

1. Step 1: Recall correct @else if syntax

   In Sass, @else if is written as two words without parentheses around the condition.

2. Step 2: Check each option

   @else if $color == red { color: red; } uses correct syntax: @else if $color == red { ... }. @elseif $color == red { color: red; } misses space. @else if ($color == red) { color: red; } uses parentheses which Sass does not require. @else if $color = red { color: red; } uses single equals which is assignment, not comparison.

3. Final Answer:

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

4. Quick Check:

   Correct @else if syntax = @else if $color == red { color: red; } [OK]

Hint: Use space and double equals, no parentheses for @else if [OK]

Common Mistakes:

• Writing @elseif as one word
• Using parentheses around condition
• Using single equals instead of double equals

3. What color will be applied by this Sass code?

$color: blue;

@if $color == red {
  background: red;
} @else if $color == green {
  background: green;
} @else {
  background: black;
}

medium

A. black

B. green

C. blue

D. red

Solution

1. Step 1: Check the value of $color

   The variable $color is set to blue.

2. Step 2: Evaluate conditions in order

   First @if checks if $color == red (false). Then @else if checks if $color == green (false). Since both are false, @else runs, setting background to black.

3. Final Answer:

   black -> Option A

4. Quick Check:

   None matched, so @else runs = black [OK]

Hint: If no @if or @else if matches, @else runs [OK]

Common Mistakes:

• Assuming @else if runs when condition is false
• Thinking @else is optional and skipped
• Confusing variable value with condition

4. Identify the error in this Sass code snippet:

@if $size == large {
  font-size: 2rem;
} @else if $size = medium {
  font-size: 1.5rem;
} @else {
  font-size: 1rem;
}

medium

A. Incorrect use of curly braces in @else

B. Missing semicolon after @if condition

C. Using single equals (=) instead of double equals (==) in @else if

D. Variable $size is not declared

Solution

1. Step 1: Check condition operators

   In Sass, conditions use double equals == to compare values, not single equals = which assigns values.

2. Step 2: Locate the error

   The @else if line uses $size = medium which is assignment, causing a syntax error.

3. Final Answer:

   Using single equals (=) instead of double equals (==) in @else if -> Option C

4. Quick Check:

   Comparison needs ==, not = [OK]

Hint: Use == for comparisons, = is for assignments [OK]

Common Mistakes:

• Using = instead of ==
• Forgetting to declare variables
• Misplacing curly braces

5. Given this Sass code, what will be the background color if $theme is set to null?

$theme: null;

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

hard

A. gray

B. black

C. white

D. null

Solution

1. Step 1: Understand null in Sass conditions

   null is a special value that does not equal strings like light or dark.

2. Step 2: Evaluate conditions with $theme = null

   Both @if $theme == light and @else if $theme == dark are false. So, @else runs, setting background to gray.

3. Final Answer:

   gray -> Option A

4. Quick Check:

   null matches no condition, so @else runs [OK]

Hint: null never equals strings; @else handles it [OK]

Common Mistakes:

• Assuming null equals a string
• Forgetting @else runs when no conditions match
• Expecting null to output literally