Search code examples
sassbourbonneat

Sass @each pass variable to mixin


I'm trying to create some BS-like classes for a grid, using Bourbon Neat grid mixins. My code looks like this:

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

What I want to happen is this:

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

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

//...

Grunt build log is saying:

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

So what I can't figure out is why I can't pass the value from $num to the mixin.


Solution

  • Modified example from the docs to suit your case. And I used a @for loop in place of the @each, although you could do it with the @each as well. The Problem is that you pass the variable as a string, resulting in math operations on a string, you have to remove the #{} from the variable.

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

    EDIT: Play with this gist on SassMeister.