如何在SCSS中动态生成逗号分隔的列类？

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

基于以下内容生成动态列类列表是网格系统中的常见场景给定数量的列。 SCSS作为CSS的扩展，为此类场景提供了强大的解决方案。然而，实现所需的逗号分隔的类列表可能具有挑战性。

要创建用逗号分隔的列类的动态列表，您可以利用 SCSS 中强大的 @extend 指令。它的工作原理如下：

1. 定义具有所需样式的占位符类：

%float-styles {
  float: left;
}

2. 创建一个 mixin，使用 @extend 将这些样式应用到生成的列类：

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

3. 调用mixin 生成列类：

@include col-x-list;

4. 用所需的列数定义 $columns：

$columns: 12;

此方法将生成一个逗号- 具有所需浮动样式的分隔列类列表，例如：

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

By使用@extend，您可以有效地将样式从一个选择器应用到另一个选择器，帮助您以最少的代码重复实现动态生成的列类列表。

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