Problem With Parametric Nested Mixins?

Jul 18, 2011 at 6:42 PM

Hi,

I'm having a problem with parametric nested mixins. Specifically, variables don't seem to flow through correctly on subsequent uses of the mixin.

This is best explained with an example, here is the less code:

.button (@height)
{
    height: @height;
    line-height: @height;

    span {
        height: @height;
    }
}
.button1 {
    .button (20px);
}
.button2 {
    .button (30px);
}

And here is the CSS Chirpy is producing for me:

.button1 {
  height: 20px;
  line-height: 20px;
}
.button1 span {
  height: 20px;
}
.button2 {
  height: 30px;
  line-height: 30px;
}
.button2 span {
  height: 20px;
}

 

The first time the mixin is used (ie .button1), the @height work correctly for the properties on .button and flows through correctly to the nested element "span" - ie height = 20px. The second time the mixin is used (ie button2), the height is used for the properties on .button, but does not flow through to the nested class span - instead it is using the value from the first time it was called (ie 20px).

I'm new to LESS, so I'm not sure if this is expected behavior or not, but it seems like an error to me.

Is this a bug?

 

Cheers,

Brenton

Aug 10, 2011 at 8:32 AM

Definitively it's a Bug, if you compile that code with the latest version of dotless command line, it’s render as expected.

Aug 10, 2011 at 8:56 AM

Ok, I figure it out. There are something wrong with the download link, I can swear that I click to download the version 2, but for some reason, It download the old version. Be sure that you download the latest version, the one with VSI extension.

Developer
Aug 10, 2011 at 6:23 PM

It work for me with change set 1e4884c36f84

Change set content new package : dotless 1.2.0.0