State class generation (hover, active, disabled) in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of state classes like :hover, :active, and :disabled in CSS/Sass?

They define how elements look or behave when users interact with them, such as when hovering with a mouse, clicking, or when an element is disabled and not interactive.

intermediate

How can you generate multiple state classes in Sass efficiently?

By using Sass features like @each loops and mixins to write reusable code that applies styles for each state without repeating code.

beginner

What does the & symbol represent in Sass when used inside a nested selector?

It refers to the parent selector, allowing you to append pseudo-classes or other selectors to the current selector.

intermediate

Write a simple Sass mixin to generate styles for :hover, :active, and :disabled states.

A mixin can loop through states and apply styles like this:<br>

@mixin states($states) {
  @each $state in $states {
    &:#{$state} {
      // styles here
    }
  }
}

// Usage:
.button {
  @include states((hover, active, disabled));
}

beginner

Why is it important to style the :disabled state differently?

Because disabled elements should look inactive and not respond to user actions, helping users understand they cannot interact with them.

Which Sass feature helps you write styles for multiple states without repeating code?

A @each loop

B @import directive

C @extend placeholder

D @function

The @each loop lets you iterate over a list of states and apply styles for each, avoiding repetition.

In Sass, what does the selector &:hover mean inside a nested block?

A Selects the parent element when hovered

B Selects all hover elements

C Selects the child element on hover

D Selects the parent element with hover state

The & refers to the parent selector, so &:hover applies styles when the parent is hovered.

Which state class should visually indicate that an element cannot be interacted with?

A :hover

B :active

C :disabled

D :focus

The :disabled state shows that an element is inactive and not interactive.

What is the main benefit of using a Sass mixin for state classes?

A It makes the CSS file larger

B It reduces code repetition and keeps styles consistent

C It disables the states automatically

D It changes HTML structure

Mixins help reuse code and keep styles consistent across different states.

Which of these is NOT a common state class in CSS/Sass?

A :loading

B :active

C :disabled

D :hover

:loading is not a standard CSS state; :hover, :active, and :disabled are common.

Explain how you would use Sass to create styles for hover, active, and disabled states without repeating code.

Think about looping through states and nesting selectors.

Why is it important to visually differentiate the disabled state from hover and active states in a web interface?

Consider how users understand what they can or cannot click.