Looping through Breakpoints via SCSS

Question

Current I have the below, but it would be great to easily loop through the break points if possible.

@for $i from 1 through 200 {
    .m-#{$i}px {
        margin: 1px * $i !important;

        &-sm {
            @include media-breakpoint-up(sm) {
                margin: 1px * $i !important;
            }
        }

        &-md {
            @include media-breakpoint-up(md) {
                margin: 1px * $i !important;
            }
        }

        &-lg {
            @include media-breakpoint-up(lg) {
                margin: 1px * $i !important;
            }
        }

        &-xl {
            @include media-breakpoint-up(xl) {
                margin: 1px * $i !important;
            }
        }

        &-xxl {
            @include media-breakpoint-up(xxl) {
                margin: 1px * $i !important;
            }
        }
    }
}

There is more of this code to cover:

• mt
• mx
• my
• mr
• ml

Plus I have something similar setup for padding and a few other elements, it would be great to reduce the code as it is taking a fair while to generate the code.

Any help would be great.

Answer 1

You can store your breakpoints in a list and use a @each loop:

$breakpoints: sm, md, lg, xl, xxl;

@for $i from 1 through 200 {
    .m-#{$i}px {
        margin: 1px * $i !important;
        
        @each $breakpoint in $breakpoints {
             &-#{$breakpoint} {
                @include media-breakpoint-up($breakpoint) {
                    margin: 1px * $i !important;
                }
            }
        }
    }
}