less循环设置媒体查询

最近在学习媒体查询时遇到设置多个媒体宽度的问题，一个一个写的话太浪费时间。所以想用循环解决。

代码如下

// 设置媒体查询
@no: 15; //屏幕划分份数
@fit: 320px, 360px, 375px, 384px, 400px, 414px, 424px, 480px, 540px, 720px, 750px;

// 这里使用递归调用完成的循环
.loop(@index) when (@index <=length(@fit)) {
    @media screen and (min-width: extract(@fit, @index)) {
        html {
            font-size: (extract(@fit, @index) / @no);
        }
    }

    .loop(@index+1);
}
//调用
.loop(1);

生成的css跟直接写没有差别

@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}