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（第二个选项）中提到的一个办法。没有使用循环，该效果可以达到类似的效果。