Offset class 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 does it generate for the .offset-3 class?

SASS

@for $i from 1 through 5 {
  .offset-#{$i} {
    margin-left: #{($i * 10)}%;
  }
}

A .offset-3 { margin-left: 3%; }

B .offset-3 { margin-left: 30%; }

C .offset-3 { margin-left: 300%; }

D .offset-3 { margin-left: 0; }

💡 Hint

Think about how the loop multiplies the index by 10 to get the margin-left value.

The loop runs from 1 to 5. For each number $i, it creates a class .offset-$i with margin-left set to $i times 10%. So for 3, margin-left is 30%.

🧠 Conceptual

intermediate

Which SASS feature allows generating multiple offset classes efficiently?

You want to create offset classes from .offset-1 to .offset-12 with increasing margin-left values. Which SASS feature helps you do this without writing each class manually?

A Using variables to store margin values only

B Using @import to include multiple files

C Using @extend to inherit styles from a base class

D Using a @for loop to iterate through numbers and generate classes

💡 Hint

Think about repeating code with different numbers.

The @for loop lets you write one block of code that runs multiple times with different values, perfect for generating many similar classes.

❓ selector

advanced

Which selector matches all offset classes generated by this SASS code?

Consider this SASS snippet generating offset classes: @for $i from 1 through 12 { .offset-#{$i} { margin-left: #{($i * 8.3333)}%; } } Which CSS selector will select all these offset classes in a stylesheet?

A .offset

B .offset-*

C [class^="offset-"]

D .offset-

💡 Hint

Look for a selector that matches class names starting with a pattern.

The attribute selector [class^="offset-"] matches any element whose class attribute starts with 'offset-'. This matches all .offset-1, .offset-2, ... classes.

❓ layout

advanced

How does using offset classes affect a Flexbox layout?

You have a Flexbox container with children. You apply .offset-2 class to one child, which adds margin-left: 16.6666%. What is the visual effect on that child in the Flexbox layout?

A The child shifts right by 16.6666% of the container width, creating space before it

B The child shrinks to 16.6666% width

C The child moves left by 16.6666%

D The child overlaps the previous sibling

💡 Hint

Margin-left pushes the element away from the left edge.

Margin-left adds space on the left side of the element, pushing it right inside the flex container, creating an offset effect.

❓ accessibility

expert

What accessibility consideration is important when using offset classes for layout?

When offset classes add margin-left to shift content visually, what should you ensure for screen reader users and keyboard navigation?

A The visual offset does not change the logical reading order or tab order

B The offset classes add aria-hidden attributes to shifted elements

C The offset classes use absolute positioning to move elements

D The offset classes remove focus outlines to improve appearance

💡 Hint

Think about how screen readers read content and how keyboard users navigate.

Visual shifts with margin do not affect the DOM order, so the reading and tab order remain logical. Avoid changing DOM order or hiding elements to keep accessibility intact.