如何在SCSS循环中调用带数字增量的变量？

SCSS不支持直接通过拼接字符串的方式动态解析变量名，所以$g0#{$i}这类写法无效。想要实现循环调用对应变量的需求，推荐使用**列表（List）或映射（Map）**来存储颜色值，具体方法如下：

方法一：使用列表（List） #

将颜色按顺序存入列表，循环时通过nth()函数根据索引获取对应颜色：

// 定义颜色列表，顺序对应1-3的灰色值
$greys: #DDD, #999, #666;

@for $i from 1 through 3 {
  .text-grey-#{$i} {
    color: nth($greys, $i);
  }
}

编译后生成的CSS：

.text-grey-1 {
  color: #DDD;
}
.text-grey-2 {
  color: #999;
}
.text-grey-3 {
  color: #666;
}

方法二：使用映射（Map） #

如果需要更明确的键值对应关系，可以用Map存储，循环时通过map-get()函数根据键获取颜色：

// 定义颜色映射，键为数字，值为对应灰色
$greys-map: (
  1: #DDD,
  2: #999,
  3: #666
);

@for $i from 1 through 3 {
  .text-grey-#{$i} {
    color: map-get($greys-map, $i);
  }
}

编译后生成的CSS和方法一完全一致。

补充说明 #

SCSS的变量插值#{$var}仅适用于生成选择器、属性名、字符串等静态内容，无法用来动态识别变量名称。因此直接拼接变量名的方式不被支持，改用列表或映射是更符合SCSS语法规范的解决方案。

内容的提问来源于stack exchange，提问作者vm7488