sass - Sass @each 将变量传递给 mixin

Question

我正在尝试使用 Bourbon Neat 网格混合器为网格创建一些类似 BS 的类。我的代码如下所示：

@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，尽管你也可以使用 the 来做到这@each一点。问题是您将变量作为字符串传递，导致对字符串进行数学运算，您必须#{}从变量中删除。

$class-slug: span !default;

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

编辑： 在 SassMeister 上玩这个要点。