State class generation (hover, active, disabled) in SASS - Mini Project: Build & Apply

State Class Generation with SASS

📖 Scenario: You are creating a button style in SASS that changes appearance based on user interaction states like hover, active, and disabled. This helps users understand when a button is clickable, pressed, or not available.

🎯 Goal: Build a SASS style that defines a base button class and generates styles for :hover, :active, and .disabled states using SASS features.

📋 What You'll Learn

Create a SASS map named $states with keys hover, active, and disabled and their respective color values.

Create a variable $base-color with the value #3498db.

Use a @each loop to generate CSS for each state in $states inside the .button class.

Add the .disabled class style with cursor: not-allowed and opacity: 0.6.

💡 Why This Matters

🌍 Real World

Buttons on websites often change appearance when hovered, clicked, or disabled to give users clear feedback.

💼 Career

Knowing how to write maintainable and reusable styles with SASS is valuable for front-end developers working on interactive UI components.

1

Create the base color and states map

Create a SASS variable called $base-color and set it to #3498db. Then create a SASS map called $states with these exact entries: hover: #2980b9, active: #1c5980, and disabled: #95a5a6.

SASS

// Create $base-color and $states map
// Your code here

Need a hint?

Use $base-color: #3498db; and $states: (hover: #2980b9, active: #1c5980, disabled: #95a5a6);

2

Start the button base style

Create a CSS class called .button and set its background-color to the variable $base-color. Also add color: white and padding: 1rem 2rem inside the .button block.

SASS

$base-color: #3498db;
$states: (
  hover: #2980b9,
  active: #1c5980,
  disabled: #95a5a6
);

.button {
  // Your code here
}

Need a hint?

Inside .button, write background-color: $base-color;, color: white;, and padding: 1rem 2rem;

3

Generate hover and active states with @each loop

Inside the .button class, use a @each loop with variables $state and $color to loop over $states. For each $state except disabled, create a nested selector using &:#{$state} and set background-color to $color. Use an @if statement to skip the disabled state inside the loop.

SASS

$base-color: #3498db;
$states: (
  hover: #2980b9,
  active: #1c5980,
  disabled: #95a5a6
);

.button {
  background-color: $base-color;
  color: white;
  padding: 1rem 2rem;

  // Use @each loop to create hover and active states
  // Your code here
}

Need a hint?

Use @each $state, $color in $states and inside it an @if $state != disabled to create &:#{$state} with background-color: $color;

4

Add disabled state style

Outside the @each loop but still inside the .button class, add a nested selector for .disabled that sets background-color to map-get($states, disabled), cursor to not-allowed, and opacity to 0.6.

SASS

$base-color: #3498db;
$states: (
  hover: #2980b9,
  active: #1c5980,
  disabled: #95a5a6
);

.button {
  background-color: $base-color;
  color: white;
  padding: 1rem 2rem;

  @each $state, $color in $states {
    @if $state != disabled {
      &#{$state} {
        background-color: $color;
      }
    }
  }

  // Add .disabled state style here
}

Need a hint?

Write &.disabled with background-color: map-get($states, disabled);, cursor: not-allowed;, and opacity: 0.6;