通过 SCSS 循环断点

Posted 2023-03-06

【中文标题】通过 SCSS 循环断点

【英文标题】：Looping through Breakpoints via SCSS

【发布时间】：2022-01-23 09:44:07

【问题描述】：

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

@for $i from 1 through 200 
    .m-#$ipx 
        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 我的 先生 毫升

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

任何帮助都会很棒。

【参考方案1】：

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

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

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