使用 @for 循环 SASS 更改颜色答案

【问题标题】：Change colors with @for loop SASS使用 @for 循环 SASS 更改颜色
【发布时间】：2021-10-01 11:18:18
【问题描述】：

所以我在 sass 中有一张颜色图，如下所示

$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)
);

现在我想将这些颜色中的每一种传递给不同的 div。我尝试在 sass 中使用 @for 循环，但它不断向我抛出编译错误。这是@for 循环代码：

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

请记住，我有 8 个不同的 .option 容器进行迭代

我怎样才能使它正常工作？

【问题讨论】：

错误是什么？

标签： css loops sass colors frontend

【解决方案1】：

您正在使用 module-function map.get() 而不导入所述模块。

@use "sass:list";
@use "sass:map";

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

@for $i from 1 through list.length($form-option-colors) {
  .option-#{$i} {
    color: list.nth(map.values($form-option-colors), $i);
  }
}

您可以通过全局名称调用函数来避免必须先导入模块。

map.get() //module
map-get() //global

虽然我不鼓励你这样做，因为 Sass 将来会弃用全局函数。

还要确保您正在运行 Dart-Sass。

【讨论】：

【解决方案2】：

通过导入模块修复它。谢谢！

【讨论】：