如何在SASS中动态生成逗号分隔的CSS类？

动态生成逗号分隔的类列表

在 SASS 中，创建动态且可配置的网格系统可能具有挑战性。其中一个障碍是根据定义的列数动态生成逗号分隔的列类列表。

为了实现这一点，我们可以利用 @extend mixin。操作方法如下：

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

此 SCSS 代码完成以下操作：

• 定义变量 $columns 来指定列数。
• 创建占位符样式定义列所需属性的图纸规则 %float-styles类。
• 利用 @mixin col-x-list 循环遍历每一列并将定义的样式应用于它。
• 包含 col-x-list mixin 以生成所需的列表类。

此方法生成如下 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;
}

此输出提供您将获得一个动态生成的逗号分隔列类列表，可以应用于您的网格系统。

以上是如何在SASS中动态生成逗号分隔的CSS类？的详细内容。更多信息请关注PHP中文网其他相关文章！