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.

Practice

1. What is the main purpose of offset classes in Sass-generated CSS?

easy

A. To hide elements from the page

B. To change the background color of elements

C. To reduce the font size of text

D. To move elements to the right by adding left margin

Solution

1. Step 1: Understand offset class function

   Offset classes add left margin to elements, shifting them right.

2. Step 2: Compare options with offset purpose

   Only To move elements to the right by adding left margin describes moving elements right by left margin.

3. Final Answer:

   To move elements to the right by adding left margin -> Option D

4. Quick Check:

   Offset classes = move right by left margin [OK]

Hint: Offsets add left margin to shift elements right [OK]

Common Mistakes:

• Confusing offset with color or font changes
• Thinking offset hides elements
• Assuming offset changes element width

2. Which Sass syntax correctly generates offset classes from 1 to 4 with 1rem increments?

easy

A. @while $i < 5 { .offset-#{$i} { margin-right: $i * 1rem; } $i: $i + 1; }

B. @for $i from 1 through 4 { .offset-#{$i} { margin-left: $i * 1rem; } }

C. @each $i in 1 2 3 4 { .offset-#{$i} { padding-left: $i rem; } }

D. @for $i from 1 to 4 { .offset-#{$i} { margin-left: $i rem; } }

Solution

1. Step 1: Check loop syntax for generating classes

   @for $i from 1 through 4 correctly loops 1 to 4 inclusive.

2. Step 2: Verify property and unit usage

   margin-left with $i * 1rem is correct; padding-left or margin-right are incorrect for offset.

3. Final Answer:

   @for $i from 1 through 4 { .offset-#{$i} { margin-left: $i * 1rem; } } -> Option B

4. Quick Check:

   Use @for with margin-left and rem units [OK]

Hint: Use @for with margin-left and multiply by rem [OK]

Common Mistakes:

• Using padding instead of margin
• Using margin-right instead of margin-left
• Incorrect loop range syntax
• Missing multiplication operator for units

3. Given this Sass code:

@for $i from 1 through 3 {
  .offset-#{$i} {
    margin-left: $i * 2rem;
  }
}

What CSS is generated for .offset-2?

medium

A. .offset-2 { margin-left: 2rem; }

B. .offset-2 { margin-left: 3rem; }

C. .offset-2 { margin-left: 4rem; }

D. .offset-2 { margin-left: 1rem; }

Solution

1. Step 1: Calculate margin-left for $i = 2

   Margin-left = 2 * 2rem = 4rem.

2. Step 2: Match calculation to options

   Only .offset-2 { margin-left: 4rem; } matches margin-left: 4rem for .offset-2.

3. Final Answer:

   .offset-2 { margin-left: 4rem; } -> Option C

4. Quick Check:

   2 * 2rem = 4rem [OK]

Hint: Multiply index by 2rem for margin-left value [OK]

Common Mistakes:

• Using $i instead of $i * 2rem
• Confusing rem values
• Mixing margin-left with margin-right

4. Identify the error in this Sass code for generating offset classes:

@for $i from 1 to 4 {
  .offset-#{$i} {
    margin-left: $i rem;
  }
}

medium

A. Missing multiplication operator between $i and rem

B. Incorrect loop range syntax, should use 'through' instead of 'to'

C. Wrong property, should use padding-left instead of margin-left

D. No error, code is correct

Solution

1. Step 1: Check unit usage in margin-left

   In Sass, units must be multiplied, so '$i rem' is invalid; should be '$i * 1rem'.

2. Step 2: Verify loop syntax and property

   'to' is valid but excludes 4; margin-left is correct property for offset.

3. Final Answer:

   Missing multiplication operator between $i and rem -> Option A

4. Quick Check:

   Use $i * 1rem, not '$i rem' [OK]

Hint: Multiply variables by units with * operator [OK]

Common Mistakes:

• Writing '$i rem' without *
• Confusing 'to' and 'through' in loops
• Using padding-left instead of margin-left

5. You want to generate offset classes with steps of 0.5rem from 0.5 to 3rem using Sass. Which code correctly achieves this?

hard

A. @for $i from 1 through 6 { .offset-#{$i} { margin-left: $i * 0.5rem; } }

B. @for $i from 0.5 through 3 by 0.5 { .offset-#{$i} { margin-left: $i rem; } }

C. @each $i in 0.5 1 1.5 2 2.5 3 { .offset-#{$i} { margin-left: $i * 1rem; } }

D. @while $i <= 3 { .offset-#{$i} { margin-left: $i * 0.5rem; } $i: $i + 0.5; }

Solution

1. Step 1: Calculate number of steps for 0.5 to 3rem

   From 0.5 to 3 in 0.5 steps is 6 steps (0.5*1 to 0.5*6).

2. Step 2: Check loop and multiplication correctness

   @for $i from 1 through 6 with margin-left: $i * 0.5rem correctly generates 0.5rem to 3rem increments.

3. Final Answer:

   @for $i from 1 through 6 { .offset-#{$i} { margin-left: $i * 0.5rem; } } -> Option A

4. Quick Check:

   Use integer loop with 0.5rem multiplier [OK]

Hint: Loop integers, multiply by 0.5rem for half-rem steps [OK]

Common Mistakes:

• Trying to loop with decimal steps (not supported in @for)
• Using incorrect unit multiplication
• Forgetting to initialize $i in @while loops