less循环遍历，动态赋值类名

一、要求

项目需要根据不同的类型展示不同的色调，其中有以下三种展示情况：
1.同色调字体

2.同色调字体；同色调圆点

3.同色调字体；同色调左边框；同色调背景，透明度0.15

二、 实现

1.定义变量

// rgb参数
@executed: 51, 153, 31;
@stop: 153, 75, 31;
@executing: 153, 75, 31;
@waiting: 46, 75, 229;
@overtime: 229, 156, 46;
@warning: 235, 136, 76;
// 通用类名字段
@linkTypeName:executed,
            stop,
            executing,
            waiting,
            overtime,
            warning;
// 类名对应颜色         
@linkType: @executed,@stop,@executing,@waiting,@overtime,@warning;

2.样式渲染函数

.linkMixin(@className, @type){
  // 字体颜色
  .el-link--@{className} {
    color: rgba(@type, 1)
  }
  // 圆点颜色
  .@{className} {
    background:rgb(@type)
  }
  // 左边框+背景
  .tagDiv .el-link--@{className}{
    border-left: 1px solid rgba(@type, 1);
    background-color: rgba(@type, 0.15);
  }
}

3.执行遍历事件

.loop(@index) when(@index<=@linklen){
  .linkMixin(extract(@linkTypeName, @index), extract(@linkType, @index));
  .loop(@index+1)
}
.loop(1);		// 这个一定要写，不然不会调用