减少 - 为颜色生成背景和边界类

Question

我需要为〜20种颜色创建类，但是我需要为每个颜色创建两个 - 一个用于背景颜色，另一个用于边界。我知道我可以这样做每种颜色：

@green: #00A300; 

.green-background { 
    background-color: @green; 
} 

.green-border { 
    border: 1px solid @green; 
} 

但我认为应该有更有效的方法。类似的东西，我指定变量，然后它循环所有颜色，并生成CSS模式：

.[color]-background { 
    background-color: [@color]; 
} 

.[color]-border { 
    border: 1px solid [@color]; 
} 

这甚至可能吗？

Answer 1

这不是太难使用Selector interpolation一个mixin做：

_LESS：

.color(@name, @value) { 
    //selector interpolation works when the entire 
    //variable is used as the selector 
    @bg-name: ~"@{name}-background"; 
    @border-name: ~"@{name}-border"; 

    .@{bg-name} { 
     background-color: @value; 
    } 
    .@{border-name} { 
     border: 1px solid @value; 
    } 
} 
//be sure to quote the first parameter in case your color name gets 
//interpreted as a value, blue would pass #00F which you don't want 
.color('blue', #0000FF); 

_CSS：

.blue-background { 
    background-color: #0000ff; 
} 
.blue-border { 
    border: 1px solid #0000ff; 
}