less中的循环

关注

原创最新推荐文章于 2026-03-22 12:40:50 发布 6k 阅读 AI 写同款· GEO 优化 ›

Less基础语法摘要： Less 是一种功能强大的 CSS 预处理器，提供变量、嵌套、混合宏、运算、函数等特性，增强 CSS 的可维护性和开发效率。其核心语法包括：变量（@定义）、嵌套结构、父选择器&、带参数的 Mixin、数学运算、颜色处理函数、模块化导入等。此外，支持命名空间、条件判断和递归循环等高级功能。可通过 Node.js、VSCode 插件或构建工具（如 Webpack）编译为 CSS。推荐模块化开发、语义化命名、合理控制嵌套层级，并善用 Mixin 提升代码复用性。阅读详情

在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;
  }
}

收录于