LESSにおける名前空間

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

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

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

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

styles.less.test {
  #block1 > .button;
}

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

styles.less.test {
  #block2 > .button;
}

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

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