State class generation (hover, active, disabled) in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS snippet?

Given this SASS code, what CSS does it generate?

.btn {
  background: blue;
  &:hover {
    background: green;
  }
  &.disabled {
    background: gray;
  }
}

SASS

.btn {
  background: blue;
  &:hover {
    background: green;
  }
  &.disabled {
    background: gray;
  }
}

A

.btn { background: blue; }
.btn:hover { background: gray; }
.btn.disabled { background: green; }

B

.btn { background: blue; }
.btn:hover { background: green; }
.btn.disabled { background: gray; }

C

.btn { background: blue; }
.btn.disabled:hover { background: green; }

D

.btn { background: blue; }
.btn:hover.disabled { background: gray; }

💡 Hint

Look at how the & symbol combines with pseudo-classes and classes.

The & symbol in SASS appends the nested selectors to the parent. &:hover becomes .btn:hover and &.disabled becomes .btn.disabled.

🧠 Conceptual

intermediate

Which selector targets the active state in SASS?

You want to style a button when it is being clicked (active state). Which SASS nested selector correctly targets this state?

SASS

.btn {
  // your code here
}

A &:active { background: red; }

B &.active { background: red; }

C &.disabled { background: red; }

D &:hover { background: red; }

💡 Hint

Active state is a pseudo-class triggered when clicking.

The :active pseudo-class applies styles when the element is being clicked. &.active targets a class named 'active', which is different.

❓ selector

advanced

What CSS does this SASS produce for combined states?

Consider this SASS code:

.btn {
  color: black;
  &:hover, &:focus {
    color: blue;
  }
  &.disabled {
    color: gray;
    pointer-events: none;
  }
}

What is the correct CSS output?

SASS

.btn {
  color: black;
  &:hover, &:focus {
    color: blue;
  }
  &.disabled {
    color: gray;
    pointer-events: none;
  }
}

A

.btn { color: black; }
.btn:hover:focus { color: blue; }
.btn.disabled { color: gray; pointer-events: none; }

B

.btn { color: black; }
.btn:hover, .disabled:focus { color: blue; }
.btn.disabled { color: gray; pointer-events: none; }

C

.btn { color: black; }
.btn:hover, :focus { color: blue; }
.btn.disabled { color: gray; pointer-events: none; }

D

.btn { color: black; }
.btn:hover, .btn:focus { color: blue; }
.btn.disabled { color: gray; pointer-events: none; }

💡 Hint

Check how multiple selectors separated by commas are expanded with &.

The & symbol applies to each selector before the comma separately, so &:hover, &:focus becomes .btn:hover, .btn:focus.

❓ layout

advanced

How to disable pointer events for a disabled button in SASS?

You want to make a button unclickable and visually disabled using SASS. Which nested rule correctly disables pointer events and changes opacity?

SASS

.btn {
  background: green;
  color: white;
  &.disabled {
    // your code here
  }
}

A

opacity: 1;
pointer-events: auto;

B

opacity: 0.5;
pointer-events: auto;

C

opacity: 0.5;
pointer-events: none;

D

opacity: 1;
pointer-events: none;

💡 Hint

Disabled means less visible and no mouse interaction.

Setting opacity to 0.5 dims the button visually, and pointer-events: none disables mouse clicks.

❓ accessibility

expert

Which approach improves accessibility for disabled buttons?

You have a button styled with a .disabled class in SASS. Which additional attribute or practice improves accessibility for keyboard and screen reader users?

SASS

.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

A Add aria-disabled="true" attribute and tabindex="-1" to the button element.

B Add role="button" attribute only.

C Add tabindex="0" to make it focusable.

D Remove the button element and replace with a div.

💡 Hint

Disabled elements should not be focusable and should announce their state.

aria-disabled="true" informs assistive tech the button is disabled, and tabindex="-1" removes it from keyboard focus.