The Problem is Scoping
In your original layout, by including .Article
at the same level as .Address
is defined, then it is using the .Small
from the .Article
as the only mixin, because it is the "local" .Small
in the .Address
context. To avoid this, the .Article
must be isolated to its own block. But then you lose the color being picked up from it's .Small
, so it must be explicitly included back into .Address
through a namespaced call. The code ends up like this:
LESS
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Address {
.Small;
.Article > .Small;
}
& {.Article;}
}
CSS Output
.Article {
margin-left: 5px;
}
.Article .Small {
color: #111;
}
.Small {
font-size: 5px;
}
.MyArticle {
margin-left: 5px;
}
.MyArticle .Address {
font-size: 5px;
color: #111;
}
.MyArticle .Small {
color: #111;
}