LESS CSS Dynamic Class Name

Question

Piszę ten plik LESS i trochę utknąłem.

Kod jest w następujący sposób:

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

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

Teraz ten produkuje następujące CSS (zauważ przestrzeń pomiędzy .flag i .us)

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

Jednak wynik, że jestem poszukuje powinny być następujące:

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

Oczywiście muszę COMBINATOR (&) gdzieś. Ale nie mogę się domyślić, gdzie dokładnie. Wszystko, co do tej pory próbowałem, powoduje błędy w analizie lub niepożądane wyniki. Czy można zacząć?

Każda pomoc zostanie doceniona.

Answer 1

jest żądanie dotyczące funkcji, aby zezwolić na & w selektorze z ewidencją lub poradzić sobie z tą sprawą, ale nie sądzę, aby było na razie jakieś obejście. jeśli znajdziesz taki, który chciałbym wiedzieć.

Answer 2

[ Późne odpowiedź, ale lepiej mieć jeden tutaj ]

As of MNIEJ 1.3.1 (październik 2012) można użyć .@{classname} zamiast (~"@{classname}") do dynamicznego generowania nazw klas, które następnie pozwala na stosowanie & przed klasą i tym kodem

w Minus:

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

spowoduje pożądany CSS

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