less中的循环

在less中使用媒体查询做rem布局，刚开始是这样写的

.Mixin(){
  @media(min-width: 720px){
    html{
      font-size: 720px/750px*100px;
    }
  }
  @media(min-width: 750px){
    html{
      font-size: 750px/750px*100px;
    }
  }

通常我们需要适配的尺寸肯定不会是两三个，过多的话一个个去写很麻烦，这时候需要遍历数组 但是less没有for循环的语法, 不过他有类似的循环
首先要定义索引index, 循环的条件是当index < 数组的长度 , 迭代条件 index++

//当前主流的设备尺寸
@deviceList: 750px ,720px, 640px, 540px,480px, 424px, 414px, 400px, 384px, 375px, 320px;

//设计稿的尺寸
@psdWidth: 750px;

//预设的基准值
@baseFontSize: 100px;

//设置数组的长度
@len:length(@deviceList);

遍历

.Mixin(@index) when (@index > 0){
  // 根据index获取对应的某个值 extract(数组名, 对应的序号)
  @media(min-width: extract(@deviceList, @index)){
    html{
      font-size: extract(@deviceList, @index)/@psdWidth*@baseFontSize;
    }
  }
  .Mixin(@index - 1);
}

调用

.Mixin(@len);

转化的结果

@media (min-width: 320px) {
  html {
    font-size: 42.66666667px;
  }
}
@media (min-width: 375px) {
  html {
    font-size: 50px;
  }
}
@media (min-width: 384px) {
  html {
    font-size: 51.2px;
  }
}
@media (min-width: 400px) {
  html {
    font-size: 53.33333333px;
  }
}
@media (min-width: 414px) {
  html {
    font-size: 55.2px;
  }
}
@media (min-width: 424px) {
  html {
    font-size: 56.53333333px;
  }
}
@media (min-width: 480px) {
  html {
    font-size: 64px;
  }
}
@media (min-width: 540px) {
  html {
    font-size: 72px;
  }
}
@media (min-width: 640px) {
  html {
    font-size: 85.33333333px;
  }
}
@media (min-width: 720px) {
  html {
    font-size: 96px;
  }
}
@media (min-width: 750px) {
  html {
    font-size: 100px;
  }
}