不能在@each规则中使用转换后的字符串

在CSS预处理器（如Sass或Less）中，@each规则用于遍历列表或映射集合，并为每个项生成样式规则。然而，@each规则本身并不支持直接使用转换后的字符串，因为它主要用于处理原始数据结构，而不是执行复杂的文本操作。

基础概念

• @each规则：用于遍历列表或映射集合，为每个项生成样式规则。
• 转换后的字符串：指通过某些操作（如拼接、替换、格式化等）生成的字符串。

问题原因

@each规则的设计初衷是处理原始数据结构，而不是执行复杂的文本操作。因此，它不支持直接使用转换后的字符串。

解决方法

可以通过以下几种方法来解决这个问题：

方法一：在@each外部进行字符串转换

在@each规则外部进行字符串转换，然后将转换后的结果传递给@each规则。

// 假设我们有一个颜色列表和一个前缀
$colors: (red, green, blue);
$prefix: 'bg-';

// 在@each外部进行字符串转换
@each $color in $colors {
  $class-name: #{'#{$prefix}'}#{$color};
  .#{$class-name} {
    background-color: $color;
  }
}

方法二：使用函数进行字符串转换

使用Sass提供的函数（如str-insert、str-index等）在@each内部进行字符串转换。

// 假设我们有一个颜色列表和一个前缀
$colors: (red, green, blue);
$prefix: 'bg-';

// 使用函数进行字符串转换
@each $color in $colors {
  $class-name: str-insert($prefix, $color, str-length($prefix));
  .#{$class-name} {
    background-color: $color;
  }
}

应用场景

这种方法适用于需要在遍历过程中生成复杂类名的场景，例如：

• 根据不同的状态生成不同的样式类名。
• 根据不同的配置生成不同的样式规则。

参考链接

• Sass @each 指南
• Sass 字符串函数

通过上述方法，可以在@each规则中处理转换后的字符串，从而实现更灵活的样式生成。