I have the following 2 mixins with different names in the same scope and defining the same variables - @width
and @height
:
.myMixin1 {
@width: 100%;
@height: 400px;
}
.myMixin2 {
@width: 75%;
@height: 200px;
}
I reference both the above mixins from within the same style rule:
.myClass {
.myMixin1;
.myMixin2;
width: @width;
height: @height;
}
This compiles to:
.myClass {
width: 100%;
height: 400px;
}
instead of
.myClass {
width: 75%;
height: 200px;
}
My question is:
Since .myMixin2
is referenced last, shouldn't the class pick up the property values from this mixin?
I figured this out:
Variables are not copied if the caller of the mixins contains variables with the same name defined by another mixin call. LESS Docs
After
.myMixin1
is called, the caller already contains the variables @width and @height. Hence, a reference to.myMixin2
does not copy over the variables with the same name.