Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── @each over a simple list ──────────────────────────────────────────────────

$sides: top, right, bottom, left;

@each $side in $sides {
    .border-#{$side}-0 { border-#{$side}: none; }
    .border-#{$side}   { border-#{$side}: 1px solid #e0e0e0; }
}

// ── @each over a map — theme color utilities ──────────────────────────────────

$theme-colors: (
    'primary'  : #3498db,
    'secondary': #2ecc71,
    'danger'   : #e74c3c,
    'warning'  : #f39c12,
    'info'     : #17a2b8,
    'dark'     : #2c3e50,
    'light'    : #ecf0f1
);

@each $name, $color in $theme-colors {
    .bg-#{$name}   { background-color: $color; }
    .text-#{$name} { color: $color; }
    .border-#{$name} { border-color: $color; }

.btn-#{$name} {
        background: $color;
        color     : if(lightness($color) > 60%, #333, #fff);
        padding   : 0.5rem 1rem;
        border    : none;
        border-radius: 4px;
        cursor    : pointer;
        &:hover { background: darken($color, 10%); }
    }
}

// ── @each with list-of-lists (multiple assignment) ────────────────────────────

$icon-sizes: (sm 16px, md 24px, lg 32px, xl 48px);

@each $label, $size in $icon-sizes {
    .icon-#{$label} {
        width : $size;
        height: $size;
        font-size: $size;
    }
}