MENOS Nombre dinámico de la clase de CSS

Question

Estoy escribiendo este archivo LESS y estoy atascado.

El código es el siguiente:

.flag (@code) { 
    (~'.@{code}') { 
     + label { 
      &:after { 
       background-image: url('images/flags/@{code}.png'); 
      } 
     } 
    } 
} 

input[type='radio'] { 
    &.flag { 
     .flag(us); 
    } 
} 

En este momento, esto produce el siguiente CSS (tenga en cuenta el espacio entre .flag y .us)

input[type='radio'].flag .us + label:after { 
    background-image: url('images/flags/us.png'); 
} 

Sin embargo, el resultado de que soy buscando debe ser lo siguiente:

input[type='radio'].flag.us + label:after { 
    background-image: url('images/flags/us.png'); 
} 

Obviamente necesito el combinador (&) en alguna parte. Pero parece que no puedo averiguar dónde exactamente. Todo lo que he intentado hasta ahora resulta en errores de análisis o resultados no deseados. ¿Es posible empezar?

Cualquier ayuda sería apreciada.

Answer 1

hay una solicitud de función para permitir & en el selector de escape o hacer frente a este caso, pero no creo que haya un trabajo por el momento. si encuentras uno que me gustaría saber

Answer 2

[ respuesta tardía, pero es mejor que tener uno aquí ]

A partir de MENOS 1.3.1 (octubre de 2012) se puede utilizar en lugar de .@{classname}(~"@{classname}") para generar dinámicamente los nombres de clase, que a su vez permite el uso de & antes de la clase y el código

en MENOS:

.flag (@code) { 
    &.@{code} { 
     + label { 
      &:after { 
       background-image: url('images/flags/@{code}.png'); 
      } 
     } 
    } 
} 
input[type='radio'] { 
    &.flag { 
     .flag(us); 
    } 
} 

producirá el deseado CSS:

input[type='radio'].flag.us + label:after { 
    background-image: url('images/flags/us.png'); 
}