SASS中使用@for循环遍历颜色地图为div设置样式报错如何解决

解决方案 #

你遇到的编译错误通常有两个核心原因：

1. 新版Dart Sass（v1.23+）要求内置工具模块需单独导入后才能使用map.get等方法
2. 旧版本Sass（如LibSass、Node Sass < v4.0）不支持map.get语法，需使用旧版全局函数

方案1：适配新版Dart Sass（推荐）

在文件顶部显式导入map模块即可运行原有代码：

// 顶部先导入Sass内置map模块
@use "sass:map";

$form-option-colors: (
    1: rgba(242,218,177,1),
    2: rgba(222,186,133,1),
    3: rgba(255,139,107,1),
    4: rgba(237,116,83,1),
    5: rgba(245,98,140,1),
    6: rgba(148,61,112,1),
    7: rgba(49,127,163,1),
    8: rgba(39,101,130,1)
);

@for $i from 1 through 8 {
  $color: map.get($form-option-colors, $i);
  .option-#{$i} {
    color: $color;
  }
}

方案2：全版本兼容写法（更健壮）

直接遍历map键值对，不需要硬写循环起止数值，后续新增颜色无需修改循环逻辑：

$form-option-colors: (
    1: rgba(242,218,177,1),
    2: rgba(222,186,133,1),
    3: rgba(255,139,107,1),
    4: rgba(237,116,83,1),
    5: rgba(245,98,140,1),
    6: rgba(148,61,112,1),
    7: rgba(49,127,163,1),
    8: rgba(39,101,130,1)
);

@each $index, $color in $form-option-colors {
  .option-#{$index} {
    color: $color;
  }
}

方案3：旧版Sass适配写法

如果你的环境是旧版Sass，将map.get替换为旧版全局map-get函数即可：

@for $i from 1 through 8 {
  $color: map-get($form-option-colors, $i);
  .option-#{$i} {
    color: $color;
  }
}

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