LESSにおける名前空間

同じ名前を持つが、異なるブロックに配置されている 2つの異なるミックスインがある場合があります：

#block1 {
	.button {
		border: 1px solid black;
	}
}
#block2 {
	.button {
		width: 100px;
	}
}

この場合、これらのミックスインは異なる名前空間に属していると言います。このようなミックスインを使用するには、その名前だけでなく、親ブロックのセレクタも指定する必要があります。

最初のミックスインを使ってみましょう：

.test {
	#block1 > .button;
}

次に、2番目のミックスインを使ってみましょう：

.test {
	#block2 > .button;
}

次のコードのコンパイル結果がどうなるか説明してください：

#block1 {
	.mix {
		width: 100px;
	}
}
#block2 {
	.mix { 
		height: 200px;
	}
}

.test {
	#block1 > .mix;
	#block2 > .mix;
}