State class generation (hover, active, disabled) in SASS - Browser Rendering Trace

Render Flow - State class generation (hover, active, disabled)

Write base button styles

↓

Define state classes: hover, active, disabled

↓

SASS compiles nested selectors

↓

Generate CSS with :hover, :active, .disabled

↓

Browser applies styles on user interaction

The SASS code defines base styles and nested state classes. When compiled, it creates CSS selectors for hover, active, and disabled states. The browser applies these styles dynamically as the user interacts.

Render Steps - 4 Steps

Code Added:.btn { background-color: #007BFF; color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; }

Before

[ ]
(empty page, no buttons)

→

After

[ Button ]
[ Click me ]
(background blue, white text, rounded corners, pointer cursor)

The base button appears with blue background and white text, shaped with padding and rounded corners. Cursor changes to pointer on hover area.

🔧 Browser Action:Creates button box with base styles, triggers layout and paint

Code Sample

Two buttons: one normal with hover and active color changes, one disabled with gray color and no pointer cursor.

SASS

<button class="btn">Click me</button>
<button class="btn disabled" disabled>Disabled</button>

SASS

.btn {
  background-color: #007BFF;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #0056b3;
  }

  &:active {
    background-color: #004085;
  }

  &.disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
  }
}

Render Quiz - 3 Questions

After applying step 2, what visual change happens when you move the mouse over the button?

A The button disappears

B The button text color changes to black

C The button background changes to a darker blue

D The button border appears

Common Confusions - 3 Topics

Why doesn't the disabled button change color on hover?

Because the disabled class sets a gray background and cursor not-allowed, and the hover styles do not apply to elements with the disabled class. The browser ignores hover styles on disabled buttons.

💡 Disabled buttons override hover styles and show gray with no pointer cursor.

Why does the cursor still show pointer on the normal button but not on disabled?

The base button sets cursor to pointer, but the disabled class changes it to not-allowed to visually show it cannot be clicked.

💡 Cursor style changes help users know if a button is clickable or not.

Why does the active background color only show while clicking?

The :active pseudo-class applies only during the mouse click or keyboard press, so the background changes only while the button is pressed.

💡 Active styles give immediate feedback during pressing.

Property Reference

Property	Value Applied	Visual Effect	Common Use
background-color	#007BFF	Blue background for normal button	Base button color
background-color	#0056b3	Darker blue on hover	Hover feedback
background-color	#004085	Even darker blue on active (click)	Click feedback
background-color	#6c757d	Gray background for disabled	Disabled state
cursor	pointer	Pointer cursor on hover	Indicates clickable
cursor	not-allowed	Not-allowed cursor on disabled	Indicates disabled
opacity	0.65	Faded look for disabled	Visual disabled cue

Concept Snapshot

State class generation uses nested SASS selectors for hover, active, and disabled states. Hover changes background color on mouse over. Active changes background color while clicking. Disabled applies gray color, faded look, and disables pointer cursor. These states give clear visual feedback for user interaction.

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