LESS의 네임스페이스

서로 다른 블록에 위치하지만 동일한 이름을 가진 두 개의 다른 믹스인이 있을 수 있습니다:

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

이 경우, 이 믹스인들은 서로 다른 네임스페이스에 속한다고 말합니다. 이런 믹스인을 사용하려면 이름뿐만 아니라 부모 블록의 선택자도 지정해야 합니다.

첫 번째 믹스인을 사용해 봅시다:

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

이제 두 번째를 사용해 봅시다:

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

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

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