1

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?

0

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.