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}調用