Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── @for through (inclusive) ─────────────────────────────────────────────────

@use 'sass:math';

// Spacing utility classes: .mt-1 through .mt-8
@for $i from 1 through 8 {
    .mt-#{$i} { margin-top   : #{$i * 0.25}rem; }
    .mb-#{$i} { margin-bottom: #{$i * 0.25}rem; }
    .pt-#{$i} { padding-top  : #{$i * 0.25}rem; }
    .pb-#{$i} { padding-bottom: #{$i * 0.25}rem; }
}

// Grid column utilities: .col-1 through .col-12
@for $i from 1 through 12 {
    .col-#{$i} {
        width: math.percentage(math.div($i, 12));
    }
}

// Opacity utilities: .opacity-10, .opacity-20 … .opacity-100
@for $i from 1 through 10 {
    .opacity-#{$i * 10} {
        opacity: math.div($i, 10);
    }
}

// ── @for to (exclusive upper bound) ──────────────────────────────────────────

// Generates .heading-1 through .heading-5 (stops before 6)
@for $i from 1 to 6 {
    .heading-#{$i} {
        font-size  : #{(2.5 - ($i - 1) * 0.35)}rem;
        font-weight: if($i <= 2, 800, 700);
        line-height: 1.2;
    }
}

// ── @while for geometric progressions ────────────────────────────────────────

$z-index : 100;
$level   : 1;

@while $z-index <= 1600 {
    .z-#{$level} { z-index: $z-index; }
    $z-index : $z-index * 2;  // doubles each step: 100 → 200 → 400 → 800 → 1600
    $level   : $level + 1;
}