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.

Practice

1. What is the main purpose of component variant generation in Sass?

easy

A. To create multiple style versions of the same component easily

B. To write JavaScript inside Sass files

C. To compile Sass into JavaScript

D. To remove unused CSS automatically

Solution

1. Step 1: Understand component variants

   Component variants allow creating different styles for the same element, like buttons with different colors.

2. Step 2: Identify the main purpose

   The main goal is to generate these style versions easily and keep code organized.

3. Final Answer:

   To create multiple style versions of the same component easily -> Option A

4. Quick Check:

   Component variant generation = multiple style versions [OK]

Hint: Variants mean different styles for one component [OK]

Common Mistakes:

• Confusing Sass with JavaScript
• Thinking Sass compiles to JS
• Believing variants remove unused CSS

2. Which Sass syntax correctly defines a mixin for generating button variants with a dynamic color?

easy

A. @include button-variant($color) { background-color: $color; }

B. @function button-variant($color) { background-color: $color; }

C. @extend button-variant($color) { background-color: $color; }

D. @mixin button-variant($color) { background-color: $color; }

Solution

1. Step 1: Identify mixin syntax

   Mixins use '@mixin' to define reusable style blocks with parameters.

2. Step 2: Check options

   @mixin button-variant($color) { background-color: $color; } uses '@mixin' correctly; others misuse '@function', '@include', or '@extend'.

3. Final Answer:

   @mixin button-variant($color) { background-color: $color; } -> Option D

4. Quick Check:

   Mixin definition starts with '@mixin' [OK]

Hint: Define mixins with '@mixin', not '@function' or '@include' [OK]

Common Mistakes:

• Using '@function' instead of '@mixin'
• Trying to define styles inside '@include'
• Confusing '@extend' with mixin definition

3. Given the Sass code:

@mixin variant($name, $color) {
  .btn-#{$name} {
    background-color: $color;
  }
}

@include variant('primary', blue);
@include variant('danger', red);

What CSS will this generate?

medium

A. .btn-primary { background-color: blue; }
.btn-danger { background-color: red; }

B. .btn-#primary { background-color: blue; }
.btn-#danger { background-color: red; }

C. .btn-primary { color: blue; }
.btn-danger { color: red; }

D. .btn-primary { background-color: $color; }
.btn-danger { background-color: $color; }

Solution

1. Step 1: Understand interpolation in class names

   The '#{$name}' inside '.btn-#{$name}' inserts the string value of $name, creating '.btn-primary' and '.btn-danger'.

2. Step 2: Check property values

   The background-color uses the passed $color values 'blue' and 'red' correctly.

3. Final Answer:

   .btn-primary { background-color: blue; } .btn-danger { background-color: red; } -> Option A

4. Quick Check:

   Interpolation creates correct class names [OK]

Hint: Use #{} to insert variables in selectors [OK]

Common Mistakes:

• Leaving interpolation as literal text
• Confusing background-color with color property
• Not passing parameters correctly

4. What is wrong with this Sass code for generating variants?

@mixin variant($name, $color) {
  .btn-$name {
    background-color: $color;
  }
}

@include variant('success', green);

medium

A. Cannot use variables in mixin parameters

B. Incorrect property name 'background-color'

C. Missing interpolation for $name in the selector

D. Mixin cannot be included with parameters

Solution

1. Step 1: Check selector syntax

   Variables inside selectors need interpolation with '#{}'. Here '.btn-$name' misses '#{}'.

2. Step 2: Understand interpolation usage

   Correct syntax is '.btn-#{$name}' to insert the variable value.

3. Final Answer:

   Missing interpolation for $name in the selector -> Option C

4. Quick Check:

   Use '#{}' to insert variables in selectors [OK]

Hint: Use #{} around variables in selectors [OK]

Common Mistakes:

• Forgetting interpolation syntax
• Thinking variables can't be in selectors
• Misusing mixin parameters

5. You want to generate button variants for 'primary', 'secondary', and 'danger' with colors blue, gray, and red using a Sass map and a mixin. Which code correctly creates all variants with minimal repetition?

hard

A. @mixin variants($map) {
.btn {
background-color: map-get($map, primary);
}
}
$btn-colors: (primary: blue, secondary: gray, danger: red);
@include variants($btn-colors);

B. @mixin variants($map) {
@each $name, $color in $map {
.btn-#{$name} {
background-color: $color;
}
}
}
$btn-colors: (primary: blue, secondary: gray, danger: red);
@include variants($btn-colors);

C. @mixin variants($map) {
@for $i from 1 through length($map) {
.btn-#{$i} {
background-color: nth($map, $i);
}
}
}
$btn-colors: (blue, gray, red);
@include variants($btn-colors);

D. @mixin variants($map) {
@each $color in $map {
.btn-#{$color} {
background-color: $color;
}
}
}
$btn-colors: (blue, gray, red);
@include variants($btn-colors);

Solution

1. Step 1: Understand map usage with @each

   Using '@each $name, $color in $map' loops over keys and values, perfect for named variants.

2. Step 2: Check each option's approach

   @mixin variants($map) { @each $name, $color in $map { .btn-#{$name} { background-color: $color; } } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors); correctly loops over a map with names and colors, generating '.btn-primary', '.btn-secondary', '.btn-danger' with correct colors.

3. Step 3: Identify issues in other options

   @mixin variants($map) { .btn { background-color: map-get($map, primary); } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors); only styles '.btn' once, ignoring variants. @mixin variants($map) { @for $i from 1 through length($map) { .btn-#{$i} { background-color: nth($map, $i); } } } $btn-colors: (blue, gray, red); @include variants($btn-colors); uses numeric indexes without names. @mixin variants($map) { @each $color in $map { .btn-#{$color} { background-color: $color; } } } $btn-colors: (blue, gray, red); @include variants($btn-colors); loops colors but uses color names as class names incorrectly.

4. Final Answer:

   @mixin variants($map) { @each $name, $color in $map { .btn-#{$name} { background-color: $color; } } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors); -> Option B

5. Quick Check:

   Use @each with map keys and values for variants [OK]

Hint: Use @each with map keys and values for variant generation [OK]

Common Mistakes:

• Looping only colors without names
• Using numeric loops without keys
• Not generating separate classes per variant