Generating utility classes with loops in SASS - Browser Rendering Trace

Render Flow - Generating utility classes with loops

[Read @for loop] -> [Iterate from 1 to 5] -> [Generate .m-1, .m-2, ... classes] -> [Compile CSS rules] -> [Apply styles to HTML elements]

The Sass compiler reads the @for loop, generates multiple CSS classes for margin utilities, then outputs CSS that the browser applies to elements.

Render Steps - 4 Steps

Code Added:@for $i from 1 through 5 { .m-#{$i} { margin: #{$i}rem; } }

Before

[Box 1]
[Box 2]
[Box 3]

→

After

[Box 1]

[Box 2]


[Box 3]

The margin classes add space around each box, increasing from 1rem to 5rem, so boxes are spaced further apart vertically.

🔧 Browser Action:Compiles Sass loop into multiple CSS classes, applies margin styles, triggers reflow to adjust layout spacing.

Code Sample

Three boxes with different margin sizes from 1rem to 5rem, created by looping in Sass to generate margin utility classes.

SASS

<div class="m-1">Box 1</div>
<div class="m-3">Box 2</div>
<div class="m-5">Box 3</div>

SASS

@for $i from 1 through 5 {
  .m-#{$i} {
    margin: #{$i}rem;
  }
}

Render Quiz - 3 Questions

After applying the Sass loop in render_step 1, what happens to the spacing between boxes?

A Boxes have increasing margin space from 1rem to 5rem

B Boxes overlap each other

C Boxes have no margin and are touching

D Boxes have padding instead of margin

Common Confusions - 2 Topics

Why do all margin classes not appear in the CSS file?

If the loop range is too small or the loop syntax is incorrect, some classes won't be generated. Check the @for loop syntax and range as in render_steps 1.

💡 Make sure your loop covers all needed values and compiles correctly.

Why does margin not add space inside the element?

Margin adds space outside the element's border, not inside. To add space inside, use padding instead.

💡 Margin = outside space; Padding = inside space.

Property Reference

Property	Value Applied	Visual Effect	Common Use
margin	1rem	Small space around element	Small gaps between elements
margin	3rem	Medium space around element	Moderate gaps for clearer separation
margin	5rem	Large space around element	Big gaps for distinct separation

Concept Snapshot

Sass @for loops generate multiple CSS classes quickly. Use interpolation #{} to create class names. Margin property adds space outside elements. Loop range controls how many classes are made. Compiled CSS applies spacing visually. Great for utility class creation.