Offset class generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple offset class with a left margin.

SASS

.offset-1 {
  margin-[1]: 1rem;
}

Drag options to blanks, or click blank then click option'

Aleft

Bright

Ctop

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin-right instead of margin-left

Using margin-top or margin-bottom which move element vertically

The margin-left property moves the element to the right by adding space on the left side.

2fill in blank

medium

Complete the Sass loop to generate offset classes from 1 to 4.

SASS

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

Drag options to blanks, or click blank then click option'

Acount

B$i

Cindex

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dollar sign in variable names

Using plain variable names without interpolation

In Sass, variables start with $. So $i is used inside the loop.

3fill in blank

hard

Fix the error in the Sass code to generate offset classes with correct margin values.

SASS

@for $n from 1 through 3 {
  .offset-#[1] {
    margin-left: $nrem;
  }
}

Drag options to blanks, or click blank then click option'

Ai

B$i

Cn

D$n

Attempts:

3 left

💡 Hint

Common Mistakes

Not interpolating the variable in the class name

Writing units separated by space from the variable

The variable $n must be interpolated inside the class name and used correctly with units in the property.

4fill in blank

hard

Fill both blanks to create offset classes with margin-left in rem units using a Sass loop.

SASS

@for $x from 1 through 5 {
  .offset-#[1] {
    margin-left: $x[2];
  }
}

Drag options to blanks, or click blank then click option'

A$x

Brem

Cpx

Dem

Attempts:

3 left

💡 Hint

Common Mistakes

Using px or em units instead of rem

Not interpolating the variable in the class name

The class name uses #{$x} to insert the number. The margin-left uses rem units for spacing.

5fill in blank

hard

Fill all three blanks to generate offset classes with margin-left in rem units and add a hover effect changing margin to zero.

SASS

@for $num from 1 through 3 {
  .offset-#[1] {
    margin-left: $num[2];
    &:hover {
      margin-left: [3];
    }
  }
}

Drag options to blanks, or click blank then click option'

A$num

Brem

C0

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' instead of '0' for margin-left

Not interpolating the variable in the class name

Forgetting units for margin-left

The class name uses #{$num}. Margin-left uses rem units. On hover, margin-left resets to 0 to remove offset.

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