Namespaces em LESS
Pode acontecer de você ter dois mixins diferentes com o mesmo nome, mas localizados em blocos diferentes:
#block1 {
.button {
border: 1px solid black;
}
}
#block2 {
.button {
width: 100px;
}
}
Nesse caso, diz-se que esses mixins pertencem a namespaces diferentes. Para usar um mixin desses, além do seu nome, você também precisa especificar o seletor do bloco pai.
Vamos usar o primeiro mixin:
.test {
#block1 > .button;
}
E agora o segundo:
.test {
#block2 > .button;
}
Conte-nos, qual será o resultado da compilação do seguinte código:
#block1 {
.mix {
width: 100px;
}
}
#block2 {
.mix {
height: 200px;
}
}
.test {
#block1 > .mix;
#block2 > .mix;
}