use variable defined for one sass mixin in another sass mixin - sass

Question

I'm trying to use a var defined for one mixin in another mixin.
In my case, I definee the $gutter variable in the container() mixin.
I don't want to define it again for the col() mixin, so I was trying to get it into the col() mixin.
Here is what I've done so far:
#mixin container($gutter, $placeholder:"cols") {
margin: 0 -#{$gutter / 2};
%#{$placeholder} {
margin-left: #{$gutter / 2};
margin-right: #{$gutter / 2};
}
}
#mixin cols($cols, $placeholder:"cols") {
#extend %#{$placeholder};
width: #{(100% / $cols) - $gutter};
}
.wrap {
#include container(2%);
> .half {
#include cols(2);
}
> .third {
#include cols(3);
}
> .fourth {
#include cols(4);
}
}
The css result I need is the following:
.wrap {
margin: 0 -1%;
}
.wrap > .half, .wrap > .third, .wrap > .fourth {
margin-left: 1%;
margin-right: 1%;
}
.wrap > .half {
width: 48%;
}
.wrap > .third {
width: 31.33333%;
}
.wrap > .fourth {
width: 23%;
}
Is there a way to do this? It fails in line 11 because $gutter is undefined. A global variable isn't the solution i need, because I have to use this mixin in different breakpoints with different gutters. So for each breakpoint will define container() and cols() for the elements again.

Answer 1

You are creating a variable inside a mixin. Variables inside mixins are local they are not global. If you want to create a global variable from a mixin then you have to use the !global flag
you can rewrite the container mixin like this
#mixin container($gutter, $placeholder:"cols") {
$gutter: $gutter !global;
margin: 0 -#{$gutter / 2};
%#{$placeholder} {
margin-left: #{$gutter / 2};
margin-right: #{$gutter / 2};
}
}