如何在样式化组件中使用for-loop？

在样式化组件中使用for-loop可以通过CSS预处理器（如Sass或Less）来实现。这些预处理器提供了循环功能，可以在样式中动态生成重复的代码。

在Sass中，可以使用@for指令来创建循环。下面是一个示例：

@for $i from 1 through 3 {
  .item-#{$i} {
    font-size: 10px * $i;
  }
}

这段代码将生成三个类名为.item-1、.item-2和.item-3的样式，它们的字体大小分别为10px、20px和30px。

在Less中，可以使用for循环来实现类似的效果。下面是一个示例：

.item-loop(@i) when (@i > 0) {
  .item-@{i} {
    font-size: 10px * @i;
  }
  .item-loop(@i - 1);
}

.item-loop(3);

这段代码也会生成三个类名为.item-1、.item-2和.item-3的样式，字体大小分别为10px、20px和30px。

对于React等前端框架，可以在组件的样式化部分使用这些循环生成的类名，从而实现样式的动态生成。

需要注意的是，使用循环生成大量样式可能会导致样式表变得庞大，影响性能。因此，在使用循环时应谨慎考虑样式的复杂性和数量。