SCSS / SASS：如何动态生成一个以逗号分隔的类的列表 [英] SCSS/SASS: How to dynamically generate a list of classes with commas separating them

问题描述

我使用SASS的SCSS语法来创建动态网格系统，但我遇到了麻烦。

I'm working with the SCSS syntax of SASS to create a dynamic grid system but I've hit a snag.

我试图使网格系统完全动态如下：

I'm trying to make the grid system completely dynamic like this:

$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...

我想做下一步是动态生成列表类的长列表，以逗号分隔，基于选择的$列数 - 例如，我想它看起来像这样：

This works well but what I want to do next is dynamically generate a long list of column classes separated by commas based on the number of $columns chosen - e.g I want it to look like this:

.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;
}
etc...

任何人都有什么想法吗？

Does anyone have any ideas?

感谢

推荐答案

我想你可能想看看 @extend 。如果你设置了类似：

I think you may want to take a look at @extend. If you set that up something like:

$columns: 12;

%float-styles {
  float: left;
}

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

@include col-x-list;

它应该在css文件中显示为：

It should render in your css file as:

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
  float: left;
}

@ extend in the docs 。

希望这有助于！

这篇关于SCSS / SASS：如何动态生成一个以逗号分隔的类的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！