Question

我正在尝试使用Bourbon Neat grid mixins为网格创建一些类似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

来自docs的修改示例以适合您的情况。我使用@for循环代替@each，尽管您也可以使用@each。问题是您将变量作为字符串传递，导致对字符串进行数学运算，您必须从变量中删除#{}。

$class-slug: span !default;

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

编辑： Play with this gist on SassMeister.

Sass @each将变量传递给mixin

1 个答案: