DEV Community

Discussion on: How to Dynamically Create Many Similar CSS Classes with Sass

Collapse
 
xiwcx profile image
i. welch canavan

love this trick!

maps combined with @each loops can also DRY up your code:

$gutter-column-sizes: (
    none: 0,
    sm: $unit / 6,
    md: $unit / 4,
    lg: $unit / 2,
    xl: $unit,
);

@each $gutter-column-size-key, $gutter-column-size-value in $gutter-column-sizes {
    .gutter-column--#{$gutter-column-size-key} {
        padding-inline-start: $gutter-column-size-value;
        padding-inline-end: $gutter-column-size-value;
    }
}