each() 是 Less 中用于实现循环的核心函数，它可以遍历列表或规则集，为每个元素生成 CSS 规则。以下是 each() 函数的完整使用指南。

一、基础语法

each(@collection, {
  // 循环体
  .@{value}-@{index} {
    property: @value;
  }
});

参数	描述
@collection	要遍历的列表或规则集
循环体内可用变量	@value (当前值), @index (索引), @key (键名，仅规则集)

二、基本用法

1、遍历列表（数组）

1. 基本示例

@colors: red, green, blue;

each(@colors, {
  .color-@{index} {
    color: @value;
  }
});

输出：

.color-1 {
  color: red;
}
.color-2 {
  color: green;
}
.color-3 {
  color: blue;
}

2. 生成工具类

@spacings: 0, 4px, 8px, 16px;

each(@spacings, {
  .p-@{index} {
    padding: @value;
  }
  .m-@{index} {
    margin: @value;
  }
});

2、遍历规则集

1. 基本示例

@theme: {
  primary: #4285f4;
  secondary: #34a853;
  danger: #ea4335;
};

each(@theme, {
  .bg-@{key} {
    background-color: @value;
  }
});

输出：

.bg-primary {
  background-color: #4285f4;
}
.bg-secondary {
  background-color: #34a853;
}
.bg-danger {
  background-color: #ea4335;
}

三、高级用法

1. 嵌套循环

@sizes: sm, md, lg;
@properties: margin, padding;

each(@sizes, {
  @size: @value;
  each(@properties, {
    .@{value}-@{size} {
      @{value}: if(@size = sm, 4px, if(@size = md, 8px, 16px));
    }
  });
});

2. 条件循环

@colors: red, green, blue, yellow;

each(@colors, {
  & when (lightness(@value) > 50%) {
    .light-@{index} {
      color: @value;
    }
  }
});

3. 生成网格系统

.generate-columns(@n) {
  @list: 1 @n;
  each(@list, {
    .col-@{value} {
      width: (@value * 100% / @n);
    }
  });
}

.generate-columns(12);

四、匿名参数模式（Less 3.7+）

// 传统方式
each(@list, (@val, @i) => {
  .item-@{i} { color: @val; }
});

// 匿名参数方式（推荐）
each(@list, {
  .item-@{index} { color: @value; }
});

五、实际应用场景

1. 生成响应式断点

@breakpoints: {
  sm: 576px;
  md: 768px;
  lg: 992px;
  xl: 1200px;
};

each(@breakpoints, {
  @media (min-width: @value) {
    .@{key}\:text-center {
      text-align: center;
    }
  }
});

2. 创建动画延迟序列

@delays: 100ms, 200ms, 300ms, 400ms;

each(@delays, {
  .delay-@{index} {
    animation-delay: @value;
  }
});

3. 多语言样式生成

@lang-styles: {
  en: ltr;
  ar: rtl;
  he: rtl;
};

each(@lang-styles, {
  [lang="@{key}"] {
    direction: @value;
  }
});

六、总结

each() 函数使 Less 具备了强大的动态样式生成能力，特别适合需要批量生成相似规则的情况，如设计系统、工具类库等场景。

注意事项

1. 变量作用域：循环内定义的变量不会泄漏到外部作用域
2. 性能考虑：避免过度复杂的嵌套循环
3. 可读性：当循环体复杂时，考虑使用传统参数命名方式
4. 浏览器兼容性：生成的 CSS 需考虑浏览器兼容性

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24