HTML类名称作为LESS变量的链接

Question

我有一组带颜色的LESS变量：

@blue: #0e9bd0;
@green: #009646;
@red: #f81010;

我使用这样的类名：

.color-blue {
  color: @blue;
}

.border-blue {
  border-color: @blue;
}

.bg-blue {
  background: @blue;
}

是否可以自动为每种颜色生成规则？ 像下面的东西？

.color-@{name} {
  color: @@name;
}

.border-@{name} {
  border-color: @@name;
}

.bg-@{name} {
  background: @@name;
}

Answer 1

// define colours
@blue: #0e9bd0;
@green: #009646;
@red: #f81010;

// import loop helper
@import "https://raw.githubusercontent.com/seven-phases-max/less.curious/master/src/for.less";

// define colour array
@colors: 'green', 'red', 'blue';

  .for(@colors); .-each(@color) {
    @name: e(@color);

      .color-@{name} {
        color: @@name;
      }

      .border-@{name} {
        border-color: @@name;
      }

     .bg-@{name} {
        background: @@name;
     }    

  }