SCSS / SASS：如何动态生成包含逗号的类列表

十三村村蛋蛋2020-03-18

我正在使用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...

这很好用，但是我接下来要做的是根据选择的$ columns的数目动态生成一列由逗号分隔的长列类 -例如，我希望它看起来像这样：

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

我对这里的逻辑以及创建这样的东西所需的SCSS语法有些困惑。

有人有什么想法吗？

谢谢

逆天米亚2020/03/18 18:32:08

我想您可能想看看@extend。如果您将其设置为：

$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文件中呈现为：

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

希望这可以帮助！

神无小小2020/03/18 18:32:08

还有一种方法可以解决您的问题特别要求的内容：生成（并使用）带有逗号分隔的类列表。D.Alexander的回答完全适合您的情况，但是如果有其他用例正在研究这个问题，我将发布此替代方法。

这是一支笔演示：http : //codepen.io/davidtheclark/pen/cvrxq

基本上，您可以使用Sass函数来实现所需的功能。具体来说，我正在使用append将类添加到列表中（以逗号分隔）的方式，unquote以避免与类名中的句点发生编译冲突。

所以我的mixin最终看起来像这样：

@mixin col-x {
  $col-list: null;
  @for $i from 1 through $columns {
    .col-#{$i} {
      width: $column-size * $i;
    }
   $col-list: append($col-list, unquote(".col-#{$i}"), comma);
  }
  #{$col-list} {
    float: left;
  }
}

希望能帮助到别人。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer