Challenge - 5 Problems
Sass Loop Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
📝 Syntax
intermediate2:00remaining
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; } }
Attempts:
2 left
💡 Hint
Look at how the variable $size is used inside the loop and the unit applied.
✗ Incorrect
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
intermediate1:30remaining
How many classes are generated by this Sass loop?
Consider the Sass code below:
How many CSS classes will this generate?
@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; } }
Attempts:
2 left
💡 Hint
The @for loop includes both the start and end numbers.
✗ Incorrect
The @for loop runs from 1 through 4, inclusive, so it generates 4 classes: .p-1, .p-2, .p-3, and .p-4.
❓ selector
advanced2:30remaining
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; } }
Attempts:
2 left
💡 Hint
Check how the variable $color is used inside the CSS property and selector.
✗ Incorrect
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
advanced2:30remaining
What visual result does this Sass grid utility generate?
Given this Sass code:
What will you see when applying
@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); } }
Attempts:
2 left
💡 Hint
The class sets grid-template-columns to repeat the number of columns specified.
✗ Incorrect
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
expert3:00remaining
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?
Note: The ARIA role is added in HTML, but you want the CSS classes to reflect the correct styling for accessibility focus states.
$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; } }
Attempts:
2 left
💡 Hint
ARIA roles are added in HTML, but CSS can improve accessibility by styling focus states.
✗ Incorrect
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.