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

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
}

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
}

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
}

Hint

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

Practice

1. What is the main purpose of using state classes like :hover, :active, and .disabled in Sass?

easy

A. To change the appearance of elements based on user interaction or status

B. To add animations to elements automatically

C. To create new HTML elements dynamically

D. To load external CSS files conditionally

Solution

1. Step 1: Understand state classes

   State classes like :hover and :active change how elements look when users interact with them.

2. Step 2: Identify their purpose

   They help show different styles for hover, active, or disabled states to improve user experience.

3. Final Answer:

   To change the appearance of elements based on user interaction or status -> Option A

4. Quick Check:

   State classes change look on interaction [OK]

Hint: State classes show style changes on user actions [OK]

Common Mistakes:

• Thinking state classes create new elements
• Confusing state classes with animations
• Believing state classes load files

2. Which of the following is the correct Sass syntax to create a mixin for hover and active states?

easy

A. @mixin states { :hover { color: blue; } :active { color: red; } }

B. @mixin states { &:hover { color: blue; } &:active { color: red; } }

C. @mixin states { .hover { color: blue; } .active { color: red; } }

D. @mixin states { hover { color: blue; } active { color: red; } }

Solution

1. Step 1: Review Sass mixin syntax

   Mixins use @mixin name { ... } and nested selectors use &:state for pseudo-classes.

2. Step 2: Check correct pseudo-class usage

   Correct syntax uses &:hover and &:active inside the mixin.

3. Final Answer:

   @mixin states { &:hover { color: blue; } &:active { color: red; } } -> Option B

4. Quick Check:

   Use & with :hover and :active in mixins [OK]

Hint: Use & before pseudo-classes inside mixins [OK]

Common Mistakes:

• Omitting & before pseudo-classes
• Using class selectors instead of pseudo-classes
• Missing @mixin keyword

3. Given this Sass code, what color will the button text be when hovered?

@mixin states {
  &:hover { color: green; }
  &:active { color: orange; }
  &.disabled { color: gray; cursor: not-allowed; }
}

.button {
  color: black;
  @include states;
}

medium

A. Green

B. Black

C. Orange

D. Gray

Solution

1. Step 1: Understand the mixin states

   The mixin sets color: green on :hover, color: orange on :active, and gray with disabled class.

2. Step 2: Check the hover state

   When the button is hovered, the :hover style applies, changing text color to green.

3. Final Answer:

   Green -> Option A

4. Quick Check:

   Hover changes color to green [OK]

Hint: Hover state color overrides base color [OK]

Common Mistakes:

• Confusing active color with hover color
• Ignoring the disabled class
• Assuming base color stays on hover

4. Identify the error in this Sass code that tries to create disabled state styles:

@mixin states {
  &:hover { color: blue; }
  &:active { color: red; }
  &:disabled { color: gray; cursor: not-allowed; }
}

.button {
  @include states;
}

medium

A. Cannot use mixins inside class selectors

B. Missing semicolon after color: red

C. Using &:disabled instead of &.disabled for disabled class

D. Mixin name should be capitalized

Solution

1. Step 1: Check pseudo-class vs class usage

   :disabled is a pseudo-class for form elements, but here disabled is a class, so &.disabled is correct.

2. Step 2: Verify other syntax

   Semicolons are present, mixin naming is flexible, and mixins can be used inside classes.

3. Final Answer:

   Using &:disabled instead of &.disabled for disabled class -> Option C

4. Quick Check:

   Use .disabled class selector, not :disabled pseudo-class [OK]

Hint: Use .disabled class, not :disabled pseudo-class [OK]

Common Mistakes:

• Confusing :disabled pseudo-class with .disabled class
• Forgetting semicolons
• Thinking mixins need capital letters

5. You want to create a reusable Sass mixin that adds hover, active, and disabled states to any button. The disabled state should make the button look faded and prevent clicks. Which of these mixins correctly implements this behavior?

hard

A. @mixin button-states {
&:hover { background-color: lightblue; }
&:active { background-color: blue; }
&.disabled { opacity: 1; pointer-events: auto; cursor: not-allowed; }
}

B. @mixin button-states {
&:hover { background-color: lightblue; }
&:active { background-color: blue; }
&:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
}

C. @mixin button-states {
&:hover { background-color: lightblue; }
&:active { background-color: blue; }
&.disabled { opacity: 0.5; cursor: default; }
}

D. @mixin button-states {
&:hover { background-color: lightblue; }
&:active { background-color: blue; }
&.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
}

Solution

1. Step 1: Check disabled state styling

   The disabled state should fade the button with opacity: 0.5 and prevent clicks using pointer-events: none.

2. Step 2: Verify cursor and selector usage

   Using &.disabled is correct for a class. Cursor should be not-allowed to show disabled status.

3. Step 3: Compare options

   @mixin button-states { &:hover { background-color: lightblue; } &:active { background-color: blue; } &.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } } correctly uses &.disabled, sets opacity to 0.5, disables pointer events, and sets cursor properly.

4. Final Answer:

   @mixin button-states { &:hover { background-color: lightblue; } &:active { background-color: blue; } &.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } } -> Option D

5. Quick Check:

   Disabled state fades and disables clicks with pointer-events none [OK]

Hint: Use pointer-events:none and opacity for disabled state [OK]

Common Mistakes:

• Using :disabled pseudo-class instead of .disabled class
• Not disabling pointer events on disabled
• Setting opacity to 1 in disabled state