Generating utility classes with loops in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass loop?

Given the Sass code below, what CSS does it generate?

$sizes: 1, 2, 3;
@each $size in $sizes {
  .m-#{$size} {
    margin: #{$size}rem;
  }
}

SASS

$sizes: 1, 2, 3;
@each $size in $sizes {
  .m-#{$size} {
    margin: #{$size}rem;
  }
}

A

.m-1 { margin: 1em; }
.m-2 { margin: 2em; }
.m-3 { margin: 3em; }

B

.m-1 { margin: 1px; }
.m-2 { margin: 2px; }
.m-3 { margin: 3px; }

C

.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }

D

.m-1 { padding: 1rem; }
.m-2 { padding: 2rem; }
.m-3 { padding: 3rem; }

💡 Hint

Look at how the variable $size is used inside the loop and the unit applied.

The @each loop iterates over the list $sizes. For each $size, it creates a class .m-#{$size} with margin set to #{$size}rem. So the output uses rem units, not px or em, and sets margin, not padding.

🧠 Conceptual

intermediate

How many classes are generated by this Sass loop?

Consider the Sass code below:

@for $i from 1 through 4 {
  .p-#{$i} {
    padding: #{$i}rem;
  }
}

How many CSS classes will this generate?

SASS

@for $i from 1 through 4 {
  .p-#{$i} {
    padding: #{$i}rem;
  }
}

A 1

B 4

C 3

D 5

💡 Hint

The @for loop includes both the start and end numbers.

The @for loop runs from 1 through 4, inclusive, so it generates 4 classes: .p-1, .p-2, .p-3, and .p-4.

❓ selector

advanced

Which option produces correct hover utility classes?

You want to generate hover background color utility classes for colors red, green, and blue using Sass loops. Which option produces the correct CSS?

$colors: red, green, blue;
@each $color in $colors {
  .bg-#{$color}:hover {
    background-color: $color;
  }
}

SASS

$colors: red, green, blue;
@each $color in $colors {
  .bg-#{$color}:hover {
    background-color: $color;
  }
}

A

.bg-red:hover { background-color: $color; }
.bg-green:hover { background-color: $color; }
.bg-blue:hover { background-color: $color; }

B

.bg-red { background-color: red; }
.bg-green { background-color: green; }
.bg-blue { background-color: blue; }

C

.bg-red:hover { background-color: #red; }
.bg-green:hover { background-color: #green; }
.bg-blue:hover { background-color: #blue; }

D

.bg-red:hover { background-color: red; }
.bg-green:hover { background-color: green; }
.bg-blue:hover { background-color: blue; }

💡 Hint

Check how the variable $color is used inside the CSS property and selector.

Option D correctly uses the variable $color to create hover selectors and sets background-color to the color name. Option D misses the :hover pseudo-class. Option D incorrectly uses # before color names, which is invalid. Option D uses the variable name literally in CSS, which won't work.

❓ layout

advanced

What visual result does this Sass grid utility generate?

Given this Sass code:

@for $i from 1 through 3 {
  .grid-cols-#{$i} {
    display: grid;
    grid-template-columns: repeat(#{$i}, 1fr);
  }
}

What will you see when applying grid-cols-2 to a container with 4 items?

SASS

@for $i from 1 through 3 {
  .grid-cols-#{$i} {
    display: grid;
    grid-template-columns: repeat(#{$i}, 1fr);
  }
}

A The container shows 2 equal columns with 4 items distributed across 2 rows.

B The container shows 1 column with 4 items stacked vertically.

C The container shows 3 columns with 4 items in a single row.

D The container shows 4 columns with 4 items in a single row.

💡 Hint

The class sets grid-template-columns to repeat the number of columns specified.

The class grid-cols-2 sets grid-template-columns to repeat(2, 1fr), creating 2 equal columns. With 4 items, they fill 2 rows and 2 columns.

❓ accessibility

expert

Which Sass loop generates utility classes with proper ARIA roles for buttons?

You want to create button utility classes with different colors and ensure each button has an ARIA role="button" attribute in HTML. Which Sass code snippet helps generate the CSS classes correctly?

$btn-colors: primary, secondary;
@each $color in $btn-colors {
  .btn-#{$color} {
    background-color: map-get($colors, $color);
    color: white;
  }
}

Note: The ARIA role is added in HTML, but you want the CSS classes to reflect the correct styling for accessibility focus states.

SASS

$btn-colors: primary, secondary;
@each $color in $btn-colors {
  .btn-#{$color} {
    background-color: map-get($colors, $color);
    color: white;
  }
}

A

@each $color in $btn-colors {
  .btn-#{$color} {
    background-color: map-get($colors, $color);
    color: white;
  }
  .btn-#{$color}:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
  }
}

B

@each $color in $btn-colors {
  .btn-#{$color} {
    background-color: map-get($colors, $color);
    color: white;
    role: button;
  }
}

C

@each $color in $btn-colors {
  .btn-#{$color} {
    background-color: map-get($colors, $color);
    color: white;
    aria-role: button;
  }
}

D

@each $color in $btn-colors {
  .btn-#{$color} {
    background-color: map-get($colors, $color);
    color: white;
    &:hover {
      cursor: pointer;
    }
  }
}

💡 Hint

ARIA roles are added in HTML, but CSS can improve accessibility by styling focus states.

Option A adds a :focus-visible style with a visible outline, which helps keyboard users see focus. Options A and B incorrectly try to add ARIA roles in CSS, which is invalid. Option A adds hover cursor but misses focus styling important for accessibility.