如何通過LESS函數使用＆（AND選擇器）？

Question

下面是輸出的需要是什麼：

div.star_mask { 
    &.fill-0 { 
     width: 0%; 
    } 
    &.fill-50 { 
     width: 50%; 
    } 
} 

我這樣做了很多次，所以我做了一個函數生成它：

#star { 
    .star-fill(@width) { 
     (~"&.fill-@{width}") { 
      div { width: ~"@{width}%" } 
     } 
    } 
} 

div.star_mask { 
    #star > .star-fill(0) 
} 

這將生成以下CSS：

div.star_mask &.fill-0而不是我需要的：div.star_mask.fill-0

那麼有沒有辦法做到這一點？我可以把&的功能稱爲？

我結束了由編碼選擇自己解決這個問題：div.star_mask.fill-@{width}和放置函數調用上一級。嵌套他們仍然是非常酷！

Answer 1

當較少出現（〜「」）作爲選擇器時，它不會解析內容，而是逐字接受它，所以您不能在其中使用&。

我不認爲有一種方法可以實現您目前想要的，但請記住，您可以在選擇器的末尾使用&，例如，

.a { 
    div& { 
    foo:bar; 
    } 
} 

成爲

div.a { 
    foo: bar; 
} 

不知道這有助於雖然。