@if conditional logic in SASS - Mini Project: Build & Apply

@if Conditional Logic in Sass

📖 Scenario: You are designing a button style that changes color based on a theme variable. You want to use Sass @if conditional logic to set the button background color depending on whether the theme is 'dark' or 'light'.

🎯 Goal: Build a Sass stylesheet that uses @if conditional logic to set the button background color to #333 for dark theme and #eee for light theme.

📋 What You'll Learn

Create a Sass variable $theme with the value 'dark'.

Create a Sass variable $button-bg that uses @if to set background color based on $theme.

Use @if to check if $theme is 'dark' and assign #333 to $button-bg.

Use @else to assign #eee to $button-bg if $theme is not 'dark'.

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

💡 Why This Matters

🌍 Real World

Web developers often need to create themes or styles that change based on user preferences or settings. Using Sass @if conditional logic helps write clean, maintainable styles that adapt easily.

💼 Career

Knowing how to use Sass conditionals is valuable for front-end developers working on scalable CSS codebases, improving efficiency and reducing repetition.

1

Set up the theme variable

Create a Sass variable called $theme and set it to the string 'dark'.

SASS

# Create the $theme variable and set it to 'dark'
# Your code here

Hint

Use $theme: 'dark'; to create the variable.

2

Declare the button background variable

Create a Sass variable called $button-bg but do not assign a value yet.

SASS

$theme: 'dark';

// Declare $button-bg variable without value
# Your code here

Hint

Declare $button-bg with null to initialize it.

3

Use @if to set $button-bg based on $theme

Write an @if statement that checks if $theme equals 'dark'. If true, set $button-bg to #333. Use @else to set $button-bg to #eee if $theme is not 'dark'.

SASS

$theme: 'dark';
$button-bg: null;

// Use @if to set $button-bg based on $theme
# Your code here

Hint

Use @if $theme == 'dark' { $button-bg: #333; } and @else { $button-bg: #eee; }.

4

Create button style using $button-bg

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

SASS

$theme: 'dark';
$button-bg: null;

@if $theme == 'dark' {
  $button-bg: #333;
} @else {
  $button-bg: #eee;
}

// Create button style with background-color set to $button-bg
# Your code here

Hint

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