通过 SCSS 循环断点

Question

当前我有以下内容，但如果可能的话，轻松循环断点会很棒。

@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;
            }
        }
    }
}

还有更多代码需要介绍：

• 山
• mx
• 我的
• 先生
• 毫升

另外，我为填充和其他一些元素设置了类似的设置，最好减少代码，因为生成代码需要相当长的时间。

任何帮助都会很棒。

Answer 1

您可以将断点存储在list 中并使用@each 循环：

$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;
                }
            }
        }
    }
}