Offset class generation in SASS - Mini Project: Build & Apply

Offset Class Generation with Sass

📖 Scenario: You are building a responsive grid system for a website. To help with layout spacing, you want to create offset classes that move columns to the right by a certain number of grid spaces.

🎯 Goal: Create Sass code that generates CSS offset classes named .offset-1 through .offset-12. Each class should apply a margin-left equal to the number of grid spaces multiplied by a base column width of 8.3333% (which is 100% divided by 12 columns).

📋 What You'll Learn

Create a Sass list of numbers from 1 to 12 representing offset steps.

Create a variable for the base column width set to 8.3333%.

Use a Sass @each loop to generate offset classes from .offset-1 to .offset-12.

Each offset class should set margin-left to the offset number multiplied by the base column width.

💡 Why This Matters

🌍 Real World

Grid systems are common in web design to create flexible layouts. Offset classes help position content with consistent spacing.

💼 Career

Knowing how to generate CSS classes with Sass loops saves time and reduces errors in professional front-end development.

1

Create the offset steps list

Create a Sass list variable called $offset-steps with the numbers from 1 to 12 separated by spaces.

SASS

# Your code here

Need a hint?

Use parentheses or just spaces to create a list in Sass, like $list: 1 2 3;.

2

Define the base column width variable

Create a Sass variable called $base-column-width and set it to 8.3333%.

SASS

$offset-steps: 1 2 3 4 5 6 7 8 9 10 11 12;
# Your code here

Need a hint?

Set the variable with a colon and end with a semicolon, like $var: value;.

3

Generate offset classes with a loop

Use a Sass @each loop with the variable $i to iterate over $offset-steps. Inside the loop, create a class named .offset-#{$i} that sets margin-left to $i multiplied by $base-column-width.

SASS

$offset-steps: 1 2 3 4 5 6 7 8 9 10 11 12;
$base-column-width: 8.3333%;

# Your code here

Need a hint?

Use @each $i in $offset-steps { ... } and inside create .offset-#{$i} with margin-left: $i * $base-column-width;.

4

Add a comment describing the offset classes

Add a Sass comment at the top of the file that says // Offset classes for grid spacing.

SASS

// Your comment here
$offset-steps: 1 2 3 4 5 6 7 8 9 10 11 12;
$base-column-width: 8.3333%;

@each $i in $offset-steps {
  .offset-#{$i} {
    margin-left: $i * $base-column-width;
  }
}

Need a hint?

Use // to add a single-line comment in Sass.