Sass @each pass variable to mixin

Question

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.

possible duplicate of [Math with interpolated variables?](http://stackoverflow.com/questions/8254941/math-with-interpolated-variables) — cimmanon, Jun 29 '14 at 11:19

alpipego · Accepted Answer · 2014-06-29T18:36:49.017

0

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.

edited Jun 29 '14 at 18:36

answered Jun 29 '14 at 11:37

alpipego

3,223
2
17
28

Your suggestion is basically the same, so is the outcome. – abpetkov Jun 29 '14 at 17:13
No it is not. You passed the variable as a string, i.e. trying to perform a math function on a string. That is why your error says `Undefined operation: "1 times 4.2358em"`(note the quotation marks). Please check http://sassmeister.com/gist/ad6af70898402282e438 – alpipego Jun 29 '14 at 18:34
1

Oh, now I see. Makes perfect sense and works this way. Sorry for misreading that the first time. – abpetkov Jun 30 '14 at 07:34

Sass @each pass variable to mixin

1 Answers1