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.
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);
}
}