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


71

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

2
@Mag循环遍历我设置的列数,例如$ columns:6; 并创建一个名为col-1,col-2等的类。因此,如果我想要6列,则只能循环到col-6。然后,它给每个col-宽度(100%除以$列数再乘以其列数),例如col-3 =(100%/ 6)* 3 = 50%。
2013年

Answers:


112

我想您可能想看看@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

希望这可以帮助!


今天,我在网上搜索了结合css类和sass进行循环的一个小时,直到最终找到它为止。
埃里克·斯坦伯恩

大。您的答案还描述了如何创建类似的自定义代码.col-#{$i}-m
beytarovski '16

24

还有一种方法可以解决您的问题特别要求的内容:生成(并使用)带有逗号分隔的类列表。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;
  }
}

希望能帮助到别人。


超过6年后,是的!这对我有帮助。“逗号”一词的特定用法正好解决了我的问题。谢谢!
杰里米·卡尔森

10

thnx到@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%; }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.