Variable passing to ruleset by a mixin contain a loop

[oltodo]

Hi,

This is my parametric mixin contain a loop who set a @width variable and provide to ruleset :

.foo (@ruleset) {
    .loop(1);

    .loop (@index) when (@index < 4) {
        @width: 30px * @index;

        .bar {
            @ruleset();
        }

        .loop(@index + 1);
    }
}

When I call this mixin twice like that :

.foo({
    width: @width;
});
.foo({
    width: @width;
});

I have this output :

.bar {
  width: 30px;
}
.bar {
  width: 60px;
}
.bar {
  width: 90px;
}

.bar {
  width: 30px;
}
.bar {
  width: 30px;
}
.bar {
  width: 30px;
}

The first three are correct but the last three stay on 30px width.

Strangely, the following example has no problem :

.first {
    .foo({
        width: @width;
    });
}

.second {
    .foo({
        width: @width;
    });
}

An idea ?
Thanks.

[seven-phases-max]

That's because the second call is equal to

@width: 30px;
.foo({width: @width;});

since the first call exposes its top-level @width to the global scope and then this global @width overrides local @widths defined in the second call loops. I.e. the issue can be simplified to:

@width: 50px;
@ruleset: {width: @width};

.bar {
    @width: 30px;
    @ruleset(); // -> 50px
}

And this way it seems to be very close to #1316 (i.e. "global scope" > "caller scope" in certain cases).
Actually I was not sure it's #1316 (because the {width: @width} itself is "defined" at the global scope so I thought it just may pick up global variables before any other) but this:

@width: 50px;
@ruleset: {width: @width};

.-;.-() {
.bar {
    @width: 30px;
    @ruleset(); // -> 30px
}}

makes it less or more evident.

---

Workarounds for your example:

[1]. Isolating .foo calls from global scope:

& {.foo({width: @width})}
& {.foo({width: @width})}

This is basically the same as your second example and not very useful.

[2]. Same as [1] but hiding the fix inside the mixin:

.foo(@ruleset) {
    & {.loop(1)}
    .loop (@index) when (@index < 4) {
        @width: 30px * @index;
        .bar {@ruleset();}
        .loop(@index + 1);
    }
}

.foo({width: @width});
.foo({width: @width});

... better now, but still if you occasionally have global @width variable it will override everything.

[SomMeri]

I think that this is not really a bug, the scopes here are working as designed. Since variables are returned, first call introduces @width into the global scope. Detached ruleset then uses @width as defined in his own (global) scope.

Maybe we should close this?

[seven-phases-max]

Closing as expected behaviour.