LESS使用记录

Less 循环

@colorArr: #37a2da, #92b5e9, #f7c0e3;
@len: length(@colorArr);

.Loop(@index) when(@index <= @len) {
  li:nth-child(@{index}) {
    background-color: extract(@colorArr, @index);
  }
  .Loop(@index+1)
}

.Loop(1);

输出为：

li:nth-child(1) {
  background-color: #37a2da;
}
li:nth-child(2) {
  background-color: #92b5e9;
}
li:nth-child(3) {
  background-color: #f7c0e3;
}

Less 函数

计算形参@px / 40

.convert(@px) {
  @var: unit(@px * pow(40, -1));
  @rem: ~'@{var}rem';
}

//使用
margin: 0 .convert(27px)[@rem];

输出为：

margin: 0 0.675rem;