如何动态生成用逗号分隔的类列表？

Posted 2023-02-22

【中文标题】如何动态生成用逗号分隔的类列表？

【英文标题】：How to dynamically generate a list of classes with commas separating them?

【发布时间】：2013-10-05 22:30:44

【问题描述】：

我正在使用 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 语法有点卡住了。

有人有什么想法吗？

【问题讨论】：

出于好奇：“@mixin col-x @for $i 从 1 到 $columns .col-#$i width: $column-size * $i; " 你能解释一下这段代码究竟做了什么吗？

@Mag 它遍历我设置的列数，例如$列：6；并创建一个名为 col-1、col-2 等的类。所以如果我想要 6 列，它只会循环到 col-6。然后它给每个列的宽度（100% 除以 $columns 的数量，然后乘以它的列号），例如col-3 = (100% / 6) * 3 = 50%。

【参考方案1】：

我想你可能想看看@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 in the docs.

【讨论】：

太棒了。您的回答还描述了如何创建自定义代码，例如 .col-#$i-m。

【参考方案2】：

还有一种方法可以满足您的问题的具体要求：生成（并使用）一个用逗号分隔的类列表。 D.Alexander 的回答完全适用于您的情况，但我'正在发布此替代方案，以防有人查看此问题的另一个用例。

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

基本上，您可以使用Sass functions 来实现您想要的。具体来说，我使用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;
  

【参考方案3】：

@davidtheclark 这里是一个更通用的版本：

@mixin attr-x($attr, $attr-count: 10, $attr-steps: 10, $unit: '%') 
    $attr-list: null;
    @for $i from 1 through $attr-count 
        $attr-value: $attr-steps * $i;

        .#$attr#$attr-value 
            #$attr: #$attr-value#$unit;
        

        $attr-list: append($attr-list, unquote(".#$attr-#$attr-value"), comma);
    

    #$attr-list 
        //append style to all classes
    

像这样使用它：

@include attr-x('margin-left', 6, 5, 'px');
//or
@include attr-x('width');

结果如下：

.margin-left5 
  margin-left: 5px; 

.margin-left10 
  margin-left: 10px; 

...

.margin-left30 
  margin-left: 30px; 

.width10 
  width: 10%; 

.width20 
  width: 20%; 

...

.width100 
  width: 100%;