Question

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

这很有效，但我接下来要做的是动态生成一长列列，这些列由逗号分隔，基于所选的$列数 - 例如，我希望它看起来像这样：

.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语法有点困惑。

有没有人有任何想法？

由于

Answer 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

希望这有帮助！

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

希望能帮助某人。

Answer 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%; }

SCSS / SASS：如何使用逗号分隔它们来动态生成类列表

3 个答案: