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

你可能感兴趣的:(less)