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

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

在 SCSS 中创建动态网格系统通常需要生成分隔的列类列表以逗号分隔。这简化了不同列数中常见样式的应用。然而，编写这样的代码可能具有挑战性。

动态列创建

提供的 SCSS 代码成功基于变量 $columns 创建列类。但是，生成这些类的逗号分隔列表仍然是一个障碍。

使用 @extend

不要为每个列创建单独的类定义，请考虑使用 @扩展指令。通过定义扩展预定义浮动样式的 mixin，您可以实现所需的效果：

%float-styles {
  float: left;
}

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

在此代码中：

• %float-styles 占位符定义样式待扩展。
• @mixin col-x-list 创建以下列表类。
• @for 循环迭代列号。
• 每个类都扩展 %float-styles，继承其 float 属性。

结果CSS

使用此方法生成的 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;
}

这提供了一个以逗号分隔的类列表，这些类从 %float-styles 占位符继承 float 属性。通过利用@extend，您可以简化代码，同时保持所需的功能。

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