且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SASS @for 循环输出 CSS 作为一个代码块?

更新时间:2023-11-30 14:59:40

使用 @extend

$columns: 12;

%no-margin {
    margin: 0;
}

@for $i from 1 through $columns {
    .tile#{$i}.noMargin {  
        @extend %no-margin;
    }
}

输出:

.tile1.noMargin, .tile2.noMargin, .tile3.noMargin, .tile4.noMargin, .tile5.noMargin, .tile6.noMargin, .tile7.noMargin, .tile8.noMargin, .tile9.noMargin, .tile10.noMargin, .tile11.noMargin, .tile12.noMargin {
  margin: 0;
}