LESS使用類名稱聲明變量？

Question

我有一個按鈕類，設置了填充等對元件，隨後定義背景顏色的類。

.button { 
    padding: 0.5em 1em; 
    text-transform: uppercase; 
    color: #fff; 
    &.green { 
     background:@green; //declared previously 
    } 
    // ... more colours 
} 

是否可以聲明@green變量作爲類名？這將節省我不得不復制/粘貼我想要使用的每種顏色的&.green塊。

我已經無法找到任何關於這種選擇的文檔，但東西沿着線：

&.(green|blue|red) { 
    background: @{$1}; 
} 

這將產生如下：

.button.green{background:#00ff00;} 
.button.blue{background:#0000ff;} 
.button.red{background:#ff0000;} 

Answer 1

你可以通過使用具有所需顏色列表的變量來實現這一點，創建所需規則和選擇器插值的循環如下所示。

@colors: "green","blue","orange","red","yellow"; // the list of colors required 
button { 
    padding: 0.5em 1em; 
    text-transform: uppercase; 
    .loop-colors(@index) when (@index > 0){ // loop to generate rules for each color 
     .loop-colors(@index - 1); // call for the next iteration 
     @color: e(extract(@colors, @index)); // pick the color value from the list one by one based on current index 
     &.@{color} { 
      background:@color; 
     } 
    } 
    .loop-colors(length(@colors)); 
} 

Codepen Demo

注：正如評論所說，LESS PHP是相當陳舊，因此一些通過以下（相對於環）提供的新功能不被它的支持。這可以通過在this answer中提到的解決方法來解決。

你也可以採取類似的seven-phases-max在this answer（第二個選項）中提到的一個辦法。沒有使用循環，該效果可以達到類似的效果。