Css LESS-为颜色生成背景和边框类

我需要为大约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];
}

---

这是可能的吗？

这对于使用以下工具的混音来说并不难：

减： CSS:

---

使用mixin并不是很难做到这一点：

减： CSS:

---

我试图编译您的精确代码，但它说第7行有语法错误-

{bg name}{

@PavelŠtěrba，以低于1.3.0的价格，将选择器包装在

（~“

和

”

），例如

（~“{bg name}”）

@freejosh谢谢！最感谢的是zzzzBov，它可以根据我的需要工作！我试图编译您的准确代码，但它说第7行有语法错误-

{bg name}{

@PavelŠtěrba对于小于1.3.0的代码，将选择器包装在

（~“

和

”

），例如

（~“{bg name}”）

@freejosh谢谢！主要感谢ZZBOV，我需要它的时候它就可以工作了！

.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);

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