Accessing a less variable from a separate mixin - variables

Question

Basically I want to access the variable #b from a mixin for use elsewhere. an example of what I am trying to do is as follows, but this does not work:
.mixin (#x:#x, #y:#y, #z:#z) {
#b: (#x + #y) / #z;
}
.item (#x:#x, #y:#y, #z:#z) {
.mixin (#x, #y, #z);
margin-left: #b;
}
.item2 (#x:#x, #y:#y, #z:#z) {
.mixin (#x, #y, #z);
margin-right: #b;
}
Any help would be greatly appreciated and thank you in advance.
Jason

Answer 1

Obviously, your main issue here is variable scoping. Based off another answer of mine, there are cases where you can set a variable in a mixin and have it usable outside that mixin, but as that answer shows, an apparent bug in LESS prevents that variable from being set by passing in other variables (which is what you need here). NOTE: supposedly that bug is fixed, so perhaps the latest download of the LESS compiler may solve your issue; I do know that the online compilers I normally test in still do not allow this type of setting of variables.
So here is another suggested alternative: create what you need as a nested parametric mixin within your .mixin which makes #b fully accessible.
So this LESS
#x: 3;
#y: 3;
#z: 2;
.mixin (#x:#x, #y:#y, #z:#z, #bProp: null) {
//all your other mixin code
#b: (#x + #y) / #z;
//set up pattern matching for props
//that need #b
.prop(null) {} //default none
.prop(ml) {
margin-left: #b;
}
.prop(mr) {
margin-right: #b;
}
//call the property
.prop(#bProp);
}
.item (#x:#x, #y:#y, #z:#z) {
//this is a pure default of .mixin()
.mixin (#x, #y, #z);
}
.item1 (#x:#x, #y:#y, #z:#z) {
//this is set up to call the margin-left pattern
.mixin (#x, #y, #z, ml);
}
.item2 (#x:#x, #y:#y, #z:#z) {
//this is set up to call the margin-right pattern
.mixin (#x, #y, #z, mr);
}
.item();
.item1();
.item2(6,6,3);
Produces this CSS (which obviously would be used actually inside a selector, but I think you get the point).
//note that nothing is produced for .item() because it
//defaults to no extra properties other than the base .mixin()
margin-left: 3;
margin-right: 4;