0
0
SASSmarkup~5 mins

Offset class generation in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Offset classes help move elements to the right by adding space on the left. This makes layouts cleaner and easier to manage.

When you want to push a column to the right in a grid layout.
To create space before an element without adding empty elements.
When aligning content in a responsive design.
To fix alignment issues without changing HTML structure.
Syntax
SASS
@for $i from 1 through $max-columns {
  .offset-#{$i} {
    margin-left: percentage($i / $max-columns);
  }
}

This uses a loop to create multiple offset classes automatically.

The percentage() function converts the fraction to a percent value for CSS.

Examples
Generates offset classes from .offset-1 to .offset-12 for a 12-column grid.
SASS
$max-columns: 12;

@for $i from 1 through $max-columns {
  .offset-#{$i} {
    margin-left: percentage($i / $max-columns);
  }
}
Creates offset classes for a 4-column grid, useful for smaller grids.
SASS
$max-columns: 4;

@for $i from 1 through $max-columns {
  .offset-#{$i} {
    margin-left: percentage($i / $max-columns);
  }
}
Sample Program

This example shows three boxes. The second and third boxes are pushed right by 25% and 50% respectively, using offset classes generated by Sass.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Offset Class Example</title>
  <style lang="scss">
    $max-columns: 12;

    @for $i from 1 through $max-columns {
      .offset-#{$i} {
        margin-left: percentage($i / $max-columns);
      }
    }

    .box {
      width: 20%;
      background-color: #4caf50;
      color: white;
      padding: 1rem;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div class="box">No offset</div>
  <div class="box offset-3">Offset 3 columns</div>
  <div class="box offset-6">Offset 6 columns</div>
</body>
</html>
OutputSuccess
Important Notes

Offset classes add space on the left side using margin-left.

Make sure the container is wide enough to see the offset effect clearly.

Using Sass loops saves time and avoids writing many similar classes manually.

Summary

Offset classes move elements right by adding left margin.

Sass loops can generate many offset classes quickly.

Offsets help create clean, flexible layouts without extra HTML.