Boolean values and logic in SASS - Mini Project: Build & Apply

Boolean Values and Logic in Sass

📖 Scenario: You are creating a simple style sheet for a website that changes the background color of a button based on whether it is active or disabled. You will use boolean values and logic in Sass to control the button's style.

🎯 Goal: Build a Sass stylesheet that uses boolean variables and logical operations to set the background color of a button. The button should be green if active, gray if disabled, and blue otherwise.

📋 What You'll Learn

Create boolean variables for $is-active and $is-disabled with exact values.

Create a variable $default-color with the value #0000ff (blue).

Use an @if statement with boolean logic to set $button-color based on $is-active and $is-disabled.

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

💡 Why This Matters

🌍 Real World

Boolean values and logic in Sass help you create dynamic styles that change based on conditions, like button states or themes.

💼 Career

Understanding boolean logic in Sass is important for front-end developers to write clean, maintainable, and responsive stylesheets.

1

Set up boolean variables

Create two boolean variables in Sass: $is-active set to true and $is-disabled set to false.

SASS

# Create boolean variables $is-active and $is-disabled
# Your code here

Need a hint?

Use true and false keywords in Sass to assign boolean values.

2

Add default color variable

Create a variable called $default-color and set it to the hex color #0000ff (blue).

SASS

$is-active: true;
$is-disabled: false;

# Create $default-color variable with value #0000ff
# Your code here

Need a hint?

Use a hex color code to assign the default color.

3

Use boolean logic to set button color

Create a variable $button-color that uses @if logic: if $is-active is true, set $button-color to #00ff00 (green); else if $is-disabled is true, set it to #808080 (gray); otherwise, set it to $default-color.

SASS

$is-active: true;
$is-disabled: false;
$default-color: #0000ff;

# Use @if to set $button-color based on $is-active and $is-disabled
# Your code here

Need a hint?

Use @if, @else if, and @else to check boolean variables and assign colors.

4

Apply button background color

Write a CSS rule for the button element that sets its background-color property to the $button-color variable.

SASS

$is-active: true;
$is-disabled: false;
$default-color: #0000ff;

@if $is-active == true {
  $button-color: #00ff00;
} @else if $is-disabled == true {
  $button-color: #808080;
} @else {
  $button-color: $default-color;
}

// Write CSS rule for button background-color
// Your code here

Need a hint?

Use the button selector and set background-color to the variable.