LESS CSS動態類名

Question

我正在寫這個LESS文件，我有點卡住了。

的代碼如下：

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

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

眼下，這將產生下面的CSS（注意.flag和頁面沒有自動跳轉之間的空間）

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

但是，我的結果尋找應該如下：

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

很顯然，我需要的組合子（&）某處。但我似乎無法弄清楚究竟在哪裏。我迄今爲止所嘗試的所有內容都會導致解析錯誤或不良結果。是否有可能開始？

任何幫助，將不勝感激。

Answer 1

有一個功能請求允許&逃脫選擇器或應付這種情況下，但我不認爲現在有一個解決辦法。如果你找到一個我想知道的。

Answer 2

[晚的答案，但最好是有一個在這裏]

由於LESS 1.3.1（2012年10月），可以使用的，而不是.@{classname}向(~"@{classname}")動態生成的類名，然後允許在LESS使用&在課前和驗證碼

：

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

將產生所需CSS：

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