referencing multiple mixins not picking the correct property values

42 views Asked by At

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?

1

There are 1 answers

0
S K On

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.