Component variant generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code?

Given the following Sass code, what CSS will it generate?

$colors: (primary: #0055ff, secondary: #ff5500);

.button {
  @each $name, $color in $colors {
    &--#{$name} {
      background-color: $color;
    }
  }
}

SASS

$colors: (primary: #0055ff, secondary: #ff5500);

.button {
  @each $name, $color in $colors {
    &--#{$name} {
      background-color: $color;
    }
  }
}

A

.button--primary {
  background-color: #0055ff;
}
.button--secondary {
  background-color: #ff5500;
}

B

.button {
  &--primary {
    background-color: #0055ff;
  }
  &--secondary {
    background-color: #ff5500;
  }
}

C

.button--primary {
  background-color: #0055ff;
}
.button {
  &--secondary {
    background-color: #ff5500;
  }
}

D

.button--primary {
  background-color: #0055ff;
}
.button--secondary {
  background-color: #0055ff;
}

💡 Hint

Remember that & inside a nested block replaces the parent selector.

The & symbol in Sass replaces the parent selector. So &--#{$name} inside .button becomes .button--primary and .button--secondary with their respective background colors.

🧠 Conceptual

intermediate

How does Sass generate multiple component variants efficiently?

Which Sass feature helps generate multiple component variants without repeating code?

A Writing separate CSS classes manually for each variant

B Using JavaScript to dynamically add classes at runtime

C Using @each loops with maps to iterate over variant names and styles

D Using inline styles directly in HTML elements

💡 Hint

Think about how Sass can repeat code blocks with different values.

Sass @each loops combined with maps allow you to write one block of code that repeats for each variant, generating multiple CSS classes efficiently.

❓ selector

advanced

Which selector targets only the 'danger' variant button in this Sass code?

Given this Sass snippet:

$variants: (primary: blue, danger: red, success: green);

.btn {
  @each $name, $color in $variants {
    &--#{$name} {
      color: $color;
    }
  }
}

Which CSS selector will style only the danger variant?

A .btn .danger

B .btn--danger

C .btn-danger

D .btn--danger:hover

💡 Hint

Look at how the variant classes are generated with &--#{$name}.

The Sass code generates classes like .btn--danger. So the selector .btn--danger targets only the danger variant button.

❓ layout

advanced

How to create responsive component variants with Sass and CSS Grid?

You want to create button variants that change layout on small screens using CSS Grid and Sass. Which approach works best?

A Define grid-template-columns inside a media query within each variant block in Sass

B Use inline styles on buttons to change grid layout dynamically

C Write separate CSS files for each screen size variant

D Use JavaScript to toggle grid classes on window resize

💡 Hint

Think about combining Sass nesting with media queries for responsive styles.

Defining grid-template-columns inside media queries nested in each variant block in Sass allows responsive layout changes per variant efficiently.

❓ accessibility

expert

Which Sass-generated variant best supports accessible focus styles?

You have button variants generated by Sass. Which variant style ensures the best keyboard accessibility?

A Variant that changes background color on :hover only

B Variant that removes all outlines and shadows on :focus

C Variant that uses opacity change on :active without focus styles

D Variant with a visible outline on :focus using a high-contrast color

💡 Hint

Focus styles help keyboard users see which element is active.

Visible outlines on :focus with high contrast help users who navigate with keyboard to identify the focused element, improving accessibility.