@each传递变量到mixin

Question

我正在尝试为网格创建一些类似bs的类，使用Bourbon Neat网格混合。我的代码是这样的:

@each $num in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
  .span#{$num} {
    @include span-columns(#{$num});
  }
}

我想要发生的是:

.span1 {
  @include span-columns(1);
}
.span2 {
  @include span-columns(2);
}
//...

Grunt构建日志显示:

Syntax error: Undefined operation: "1 times 4.2358em".
    on line 9 of bower_components/neat/app/assets/stylesheets/grid/_private.scss, in `span-columns'
    from line 25 of app/sass/main.scss

所以我不能弄清楚的是为什么我不能传递值从$num到mixin

Answer 1

根据您的情况修改了文档中的示例。我用@for来代替@each，尽管你也可以用@each来做。问题是您将变量作为字符串传递，导致对字符串进行数学操作，您必须从变量中删除#{}。

$class-slug: span !default;
@for $i from 1 through 12 {
    .#{$class-slug}#{$i} {
        @include span-column($i);
    }
}

编辑:在SassMeister上玩这个要点