Organizando código LESS.

Organizando Código. 

Una forma de encapsular el código de manera intuitiva sería anidando nombres.

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

Sí quisiésemos usar la class button, tan sólo deberíamos usar

 #header a {
  color: orange;
  #bundle > .button;
}

De forma similar podemos "desbloquear"  mixins anidados.

.unlock(@value) { // mixin externo
  .doSomething() { // mixin interno (anidado)
    declaration: @value;
  }
}
#namespace() {
  .unlock(5); // desbloquea mixin doSomething
}
#use-namespace {
  #namespace > .doSomething(); // también funciona con espacios de nombres
}

Que nos devolvería el valor bloqueado:

#use-namespace {
  declaration: 5;
}