相关疑难解决方法(0)

我正在使用SASS的SCSS语法创建一个动态网格系统,但我遇到了麻烦.

我试图使网格系统完全动态,如下所示:

$columns: 12;

然后我创建这样的列:

@mixin col-x {
  @for $i from 1 through $columns {
  .col-#{$i} { width: $column-size * $i; }
  }
}

哪个输出:

.col-1 {
    width: 4.16667%;
  }

.col-2 {
    width: 8.33333%;
}
etc...

这很好但我接下来要做的是动态生成一个由逗号分隔的列类的长列表,基于所选的$列数 - 例如我希望它看起来像这样:

.col-1,
.col-2,
.col-3,
.col-4,
 etc... {
float: left;
}

我累了这个:

@mixin col-x-list {
  @for $i from 1 through $columns - 1 {
  .col-#{$i}-m { float: left; }
  }
}

但输出是这样的:

.col-1 {
  float: left;
}
.col-2 {
  float: left;
} …