less变量插值问题

less变量与其余数据（字符串、数字）拼接的解决方法（循环的内容是（不一样变量+固定字符串））
less官方插值格式为@{num}，与数据拼且放在冒号以后能够采用这样的格式使用@@var;
（1）放在冒号以后

//公共变量
@mkcolor1:#6ec5ff;
@mkcolor2:#ff8365;
@mkcolor3:#fdc139;
@mkcolor4:#83d36d;
@mkcolor5:#03afaf;

// loop start
.taskSlideBg(@num) when (@num <6){
  @color:"mkcolor@{num}";
  .mkUser-task-title{background:@@color;}
  .taskSlideBg((@num+1))
}
.taskSlideBg(1);
// loop end

编译为：

.mkUser-task-title {
  background: #6ec5ff;
}
.mkUser-task-title {
  background: #ff8365;
}
.mkUser-task-title {
  background: #fdc139;
}
.mkUser-task-title {
  background: #83d36d;
}
.mkUser-task-title {
  background: #03afaf;
}

（2）不在冒号后面的状况能够使用~，注意nth-child()括号内的写法

// loop start
.taskSlideBg(@num) when (@num <6){
  @num2:~"@{num}n";
  @color:"mkcolor@{num}";
  #mkUser-task-con .mkUser-task-box:nth-child(@{num2}) .mkUser-task-title{background:@@color;}
  .taskSlideBg((@num+1))
}
.taskSlideBg(1);
// loop end

编译为：

#mkUser-task-con .mkUser-task-box:nth-child(1n) .mkUser-task-title {
  background: #6ec5ff;
}
#mkUser-task-con .mkUser-task-box:nth-child(2n) .mkUser-task-title {
  background: #ff8365;
}
#mkUser-task-con .mkUser-task-box:nth-child(3n) .mkUser-task-title {
  background: #fdc139;
}
#mkUser-task-con .mkUser-task-box:nth-child(4n) .mkUser-task-title {
  background: #83d36d;
}
#mkUser-task-con .mkUser-task-box:nth-child(5n) .mkUser-task-title {
  background: #03afaf;
}

总结：一种是定义一个新的变量，将官方说的插值语法和字符串放到引号内，而后将变量定义为变量即@@var调用，一种就是使用~输出变量，而后用@{var}调用